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, 而你写的样式都是 Object, 所以，需要把你的对象 JSS to classes，就是 JSS 利用你的 object 生成样式，并且把所有的 classnames 成为一个对象为 classes 通过 props 传递给你的下一级组件。

const styles = { root: { width: '100%' } };

-> CSS :

ComponentName-root_0 { width: 100%; };

-> classes

const classes = { root: 'ComponentName-root_0' };

withStyles(stypes) 步骤完成你的完整代码是：withStyles(stypes)(Component) 如下(withStyles(stypes) 代码如下)：

return (Component) => (props) => (<Component {...props} classes={classes} />);

现在明白了吧？