css - 如何使用 jss 指定网格模板

Question

看看这个来自css-tricks的例子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

我怎样才能用jss重现这个？

Answer 1

在您的javascript中，您可以像这样添加它

import injectSheet from 'react-jss'
....
const MyComponent = ({ classes, children }) => (
  <div className={classes.container}>
    {children}
  </div>
)
...
export default injectSheet({
    container: {
     gridTemplateAreas: `
          "header header header"
          "sidebar main main"
          "footer footer footer"
        `,
    }
})(MyComponent)