在JS中重用CSS
在JS中重用CSS
提问于 2019-05-31 01:47:20
我第一次使用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样式吗？
回答 1
Stack Overflow用户
发布于 2019-05-31 11:42:21
你必须重新组装组件，然后它将应用于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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100009068
复制相关文章
相似问题