как указать grid-шаблон с помощью 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)