如何用jss指定grid-template

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)