在JS中重用CSS

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (42)

我第一次使用Material UI,我开始重复很多CSS。我已经习惯了全局样式表并重用了类,但我不确定如何使用这个框架。

我阅读了文档,我唯一能理解的情况是创建一个createMuiTheme并使用它:

Index.js

const theme = createMuiTheme({
  fontFamily: {
    primary: "\"IM Fell DW Pica SC\", serif",
})

ReactDOM.render( 
<MuiThemeProvider theme={theme}>
 <CssBaseline />
 <App />
</MuiThemeProvider>,
document.getElementById('app')
)

app.js

const styles = theme => ({
  paragraph: {
   "fontFamily": theme.fontFamily.primary
  }
})

\\ DOM

<Typography variant="caption" gutterBottom className={paragraph}>
  Here is my paragraph text
</Typography>

我甚至正确使用这个吗?对我来说,这并没有减少很多代码,因为如果我创建另一个想要使用相同字体系列的组件,我必须paragraph再次创建该类。

我在单独的文件中有多个组件,并发现自己重用了许多简单的样式,如textAlign: 'center'fontWeight: 'bold'

我想为CSS创建一个单独的JS文件并从中拉出来,但我不确定这是Material UI的设计目标。我在想,我没有createMuiTheme充分利用它的潜力。任何人都可以给我一个简单的解决方案来重用这些CSS样式吗?

提问于
用户回答回答于

你必须重新组装组件,然后它将应用于Theme包装器内的所有组件,我这样做:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const THEME = createMuiTheme({
  typography: {
    "fontFamily": "\"IM Fell DW Pica SC\", serif",
    "fontSize": 20,
    "lineHeight": 1.5,
    "letterSpacing": 0.32,
    useNextVariants: true,
    suppressDeprecationWarnings: true,
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={THEME}>
        </YourComponentsThatHasThisFont>
      </MuiThemeProvider>
    );
  }
}

export default App;

在这种情况下,我更改了排版组件表单material-ui,因此使用其标签编写的所有文本都将采用这种新的字体样式。

如果要覆盖主题设置的内容,可以使用以下HOC示例。

// imports

const styles = theme => ({
  text: {
    "&.override1": {
      fontSize: 15
    },
    "&.override2": {
      fontSize: 53,
      fontWeight: 700
    }
  }
});

const Text = ({ classes, children, override, ...rest }) => (
  <Typography
    classes={{ root: classes.text }}
    className={`${override}`}
    {...rest}
  >
    {children}
  </Typography>
);

export default withStyles(styles)(Text);

你可以像使用常规Typography组件一样使用该组件,除非你也可以传递类似的东西<Text variant="h2" override="override1">Hello World</Text>

扫码关注云+社区

领取腾讯云代金券