Question

我是Web开发的新手，我正在尝试使用material-ui。我看到一些演示代码与withStyle一起使用，而另一些则与withTheme一起使用。它们之间有什么区别吗？非常感谢！

Answer 1

更清楚地说，我认为接受的答案不能很好地解释：

1）withStyles在创建CSS样式时还提供了theme对象；创建函数的签名如下：

const styles = theme => ({
  root: {
    maxWidth: 600,
  },
  tabs: {
    borderTopWidth: 1,
    borderTopStyle: 'solid',
    borderColor: theme.palette.divider,
    width: '100%',
  },
});

可以看到theme，并且可以访问其中的所有内容，例如theme.palette。官方文档和示例无处不在，所以我只是随机选择this one。（按此按钮可显示源代码：“ <>”）

2）withTheme的目的是将theme注入props中，因此也可以在诸如render之类的组件函数中访问它，有时很有用。官方文档here。

Answer 2

withStyles覆盖特定组件的样式。

withTheme会覆盖特定组件的样式，同时还使您可以访问主题，以便您的样式可以基于主题的颜色，版式，间距等。

这可能会造成混淆，因为您必须使用以下高阶函数创建一个新组件：

const MyCustomBottom = withStyles(styles)(Button);
const MyCustomThemeBasedButton = withTheme(theme)(Button);

材质ui中的withStyle和withTheme有什么区别？

2 个答案: