如何在外部样式中使用Material-UI断点规则？解决theme未定义报错

你遇到的这个报错很典型——因为你在单独的样式文件里直接引用了theme，但这个文件并没有获取到Material-UI的theme对象，自然会提示未定义。这里有个简单且符合Material-UI设计逻辑的解决办法：

将样式定义改为函数形式 #

Material-UI的withStyles支持接收一个函数（而不只是普通对象），这个函数会自动接收当前的theme作为参数。你只需要修改你的tables.css文件（其实更建议改成.js后缀，避免和原生CSS文件混淆）：

export default (theme) => ({
  tableRow: {
    backgroundColor: "pink",
    [theme.breakpoints.down('sm')]: {
      backgroundColor: "yellow",
    },
  },
});

为什么这样能解决问题？ #

当你用函数来定义样式时，withStyles高阶组件在处理样式逻辑时，会自动把当前应用的Material-UI theme传入这个函数。这样你的样式代码就能正常访问theme.breakpoints这类主题相关的工具了。

你的组件代码不需要做任何修改，withStyles会自动处理这个函数式的样式，把最终生成的类名传递给组件的classes属性。

内容的提问来源于stack exchange，提问作者Mariusz Gałka