React中使用Material UI的相关注意事项

原创 守候你的季节 随笔 JavaScript 405阅读 2018-03-28 12:24:07 举报

material ui是一个支持PC端、移动端的UI框架,使用的过程中也踩了很多坑,下面针对如何使用以及注意事项简要总结一下(当前使用版本为最新版1.0)

  1. 使用字体图标
    在index.html下添加如下内容,即可使用字体图标

具体使用,里面直接填写图标的名字,图标名字地址见 Material icons

  1. 配置主题,全局进行共享 具体见 配置主题
  1. 子组件通过withStyles可以获取主题信息,material-ui 1.x版本中,对material提供的组件进行样式修改进行了提取,通过组件对外暴露的接口来对组件样式进行修改,有时候直接为组件添加className也可以达到效果,但是当要修改组件内部组件的时候,组件对外暴露的接口就起到了作用.
    其中样式使用了CSS in JS 方案

使用withStyles这种方式会返回一个高阶组件,高阶组件会将提供的样式就是styles通过属性classes添加到内部组件的props上,这样可以在内部组件通过this.props.classes来添加styles中的样式

注意:withStyles所返回的高阶组件如果需要保持对内部Loading组件的引用,则需要通过为高阶组件添加innerRef={(loading) => {this.loading = loading}}的方式来进行访问,如果只是通过ref则拿到是高阶组件,而不是内部的loading组件

  1. 如果我们需要把样式单独抽离出来放到独立的css文件中去,然后在组件中进行样式文件的引用,会发现,我们写的样式被组件默认提供的样式给覆盖了,这是以为material ui 将组件自身的样式设为了除!important外的最高优先级.也就是组件自身携带的样式在index.html中的位置永远是head中的最下方.

    因此如果需要对样式进行抽离的话需要改变material ui中对样式的注入方式,将我们抽离的样式放在最下方

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复