material-ui里面的withStyles是什么？

Question

https://github.com/mui-org/ma...

export default withStyles(styles, { name: 'MuiAppBar' })(AppBar);
//这里的作用是什么?

Answer 1

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

Answer 2

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