如何用jss指定grid-template

时间:2018-05-16 19:53:32

标签: css css3 css-grid jss

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重现此内容?

1 个答案:

答案 0 :(得分:2)

在您的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)