在material-ui中，如何为不同的断点设置不同的主题样式？

Question

这个问题针对的是材料-ui 1.0。

当我使用createMuiTheme创建主题时，如何为typography.title设置不同断点的不同样式？在组件级别上，我可以通过以下方式实现此目的：

const styles = theme => ({
  title: {
    fontSize: 34,
  },
  [theme.breakpoints.down('sm')]: {
    title: {
      fontSize: 28,
    }
  },
})

Answer 1

材料 - 确定有很多不同的主题解决方案。当你寻找一个对你有用的东西时，你正在寻找两件事：

1. 创建可应用于组件层次结构的主题。

文档页面“Nesting the theme”

2. 更改单个样式规则，同时保持其他样式不变。

文档页面“Customizing all instances of component type”和“Typography API”

使其工作的关键是创建第二个主题，可以看到断点，并为其提供一些特殊选项来覆盖排版：

...outerTheme,
overrides: {
  MuiTypography: {
    title: {
      [outerTheme.breakpoints.down("sm")]: {
        fontSize: 28
      },
    }
  }
}

我发现“嵌套主题”示例代码适合测试它，所以这就是它的样子：codesandbox.io/s/98192p85zy

编辑：替换最终的代码链接，使其更有用的答案，而不仅仅是文档中的示例。