在 JS 中重用 CSS

debugcn 发表于 Dev

终身学习者

我是第一次使用 Material UI，我开始重复很多 CSS。我习惯于使用全局样式表并从中重用类，但我不确定如何使用此框架来实现。

我通读了文档，对于我的情况，我唯一能理解的是创建一个createMuiTheme并像这样使用它：

索引.js

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

ReactDOM.render( 
<MuiThemeProvider theme={theme}>
 <CssBaseline />
 <App />
</MuiThemeProvider>,
document.getElementById('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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。