material-ui里面的withStyles是什么？

Question

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

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

Answer 1

楼上的回答是正确的，不过利于理解，先说下 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} />);

现在明白了吧？

Answer 2

可能楼上讲的还不够明白，我也是刚刚才弄懂，我说一下我的理解哈

withStyles的作用会把css-in-js形式的js对象转为真正的css，如：

const styles = (theme) => ({
  testhaha: { height: 140 },
  root: { height: 840 },
})

转成css后：

.test1-testhaha-1{
    height: 140px
}
.test1-root-2{
    height: 840px
}

ps. 这里的test1前缀，是可以自定义的，自定义方法在后面

好了，转换之后，样式class名整个不一样了，我要写JSX的，我怎么知道该往JSX里的className="???"填什么？

答案是：withStyles(styles,{name:'test1'})(Connections)中，Connections是下面的class对象，它的构造函数就能接收到经过转换的样式class名，方法：

class Connections extends Component {
  constructor (props) {
      super(props)
      console.log('classes', props.classes) // 下面有写这个打印的内容
  }
  render () {
    const { classes } = this.props

    return (
      <div className={classes.root}>
          <p className={classes.testhaha}></p>
      </div>
    )
  }
}

上面props.classes内容会是：

 {
   testhaha: 'test1-testhaha-1',
   root: 'test1-root-2',
 }
 

相信看到这个打印内容，以及被转换后的css-in-js，就知道它们之间的关联了吧

Answer 3

withStyles 是一个 HOC 组件，会为你的 AppBar 组件根据当前的 theme 来添加样式。核心功能就是为子组件提供了一个 classes props，这样你就可以在外部对 class name 进行修改。

在你这个例子中，就会将第一个参数 styles 的样式，覆盖掉原来主题中的 MuiAppBar 样式。