这个问题针对的是材料-ui 1.0。
当我使用createMuiTheme
创建主题时,如何为typography.title
设置不同断点的不同样式?在组件级别上,我可以通过以下方式实现此目的:
const styles = theme => ({
title: {
fontSize: 34,
},
[theme.breakpoints.down('sm')]: {
title: {
fontSize: 28,
}
},
})
材料 - 确定有很多不同的主题解决方案。当你寻找一个对你有用的东西时,你正在寻找两件事:
- 创建可应用于组件层次结构的主题。
文档页面“Nesting the theme”
- 更改单个样式规则,同时保持其他样式不变。
文档页面“Customizing all instances of component type”和“Typography API”
使其工作的关键是创建第二个主题,可以看到断点,并为其提供一些特殊选项来覆盖排版:
...outerTheme,
overrides: {
MuiTypography: {
title: {
[outerTheme.breakpoints.down("sm")]: {
fontSize: 28
},
}
}
}
我发现“嵌套主题”示例代码适合测试它,所以这就是它的样子:codesandbox.io/s/98192p85zy
编辑:替换最终的代码链接,使其更有用的答案,而不仅仅是文档中的示例。