如何修改material-ui的默认样式？

Question

直接拿了官方demo来使用：https://material-ui.com/demos...

看到它这里面的根元素固定高度 440px，想换成100%，但是这个test-root-2是使用withStyles后的classes.root返回的，不是死的，我直接设置test-root-2的样式感觉会不好，请问有没有办法设置？

另外，有没有关于 @material-ui/core/styles里面的方法的介绍？官方文档搜不到，这里面应该还有很多方法呀

Answer 1

额，我知道了，只要修改withStyles第一个参数styles.root的height就行了，原来根本不用管classes.root具体是什么值...

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

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

转成css后：

.test1-testhaha-1{
    height: 140px
}
.test1-root-1{
    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，就知道它们之间的关联了吧