material-ui里面的withStyles是什么？

Question

https://github.com/mui-org/ma...
exportdefaultwithStyles(styles,{name:'MuiAppBar'})(AppBar);
//这里的作用是什么?

Answer 1

withStyles是一个HOC组件，会为你的AppBar组件根据当前的theme来添加样式。核心功能就是为子组件提供了一个classesprops，这样你就可以在外部对classname进行修改。在你这个例子中，就会将第一个参数styles的样式，覆盖掉原来主题中的MuiAppBar样式。

Answer 2

楼上的回答是正确的，不过利于理解，先说下Material-UI中默认支持的样式吧，使用的是CSS-In-JS方案，也就是JSS,而你写的样式都是Object,所以，需要把你的对象JSStoclasses，就是JSS利用你的object生成样式，并且把所有的classnames成为一个对象为classes通过props传递给你的下一级组件。conststyles={root:{width:'100%'}};->CSS:ComponentName-root_0{width:100%;};->classesconstclasses={root:'ComponentName-root_0'};withStyles(stypes)步骤完成你的完整代码是：withStyles(stypes)(Component)如下(withStyles(stypes)代码如下)：return(Component)=>(props)=>();现在明白了吧？