如何使用 jss 指定网格模板

Posted 2023-02-22

【中文标题】如何使用 jss 指定网格模板

【英文标题】：how to specify grid-template with jss

【发布时间】：2018-10-26 23:36:01

【问题描述】：

看看这个来自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 重现此内容？

【问题讨论】：

不妨看看 material-ui 框架是如何实现他们的网格系统的：github.com/mui-org/material-ui/blob/master/packages/material-ui/…

旧评论，但 React Material UI 实际上是在他们的网格系统中使用 flex，这在这里没有帮助。

【参考方案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)