Question

我第一次使用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样式吗？

Answer 1

您必须重新设置组件的样式，然后将其应用于主题包装中的所有组件，我这样做是这样的：

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;

在这种情况下，我更改了 typography 组件的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>之类的东西

在JS中重用CSS

1 个答案: