一.标签样式

    render(){
        const {data}=this.state;
        return (
            <div >
                <h1 style={{textAlign:"center",fontFamily:"黑体"}}></h1>
            </div>
        )
    }

二.内部声明样式

const shape={
    border:"1px solid black",
    width:200,
    margin:"auto"
}
class AntdUi extends Component {
    render(){
        const {data}=this.state;
        return (
            <div >
                <h1 style={shape}></h1>
            </div>
        )
    }
}

三.外部引用(常用)

一般我们会根据业务逻辑来现实某些样式,vue可以直接通过:bind来直接写判断,但是react的样式是对象的形式,所以稍微麻烦点,并且需要配置cssModel
这里需要注意一个问题,vue写样式有个scoped,但是react没有,需要配置的

//home.less
.main{
     border:"1px solid black"
}
//组件
import  style from './home.less';
import  './home.less';//不配置cssModel
class AntdUi extends Component {
    render(){
        const {data}=this.state;
        return (
            <div >
                <h1 className={style.main}></h1>
                //如果有base样式
                <h1 className={`${style.main} left`}></h1>
                //如果需要判断的样式
                <h1 className={
                   this.state.clickbtn===item.path?
                    `${style.btn_click}  ${style.nav_btnclick}`:` ${style.nav_btnclick}`
                  }
                ></h1>
              //如果需要多重判断的样式
               <div className="rt">
                {item.YJZT==='1'?<div className={style.ok}>健康</div>: (
                  item.YJZT==='2'?<div className={style.qdyj}>轻度</div>: (
                    item.YJZT==='3'?<div className={style.zdyj}>中度</div>:(
                      item.YJZT==='4'?<div className={style.zzdyj}>重度</div>:"")
                  )
                )}
            </div>
            <div className="main">不配置cssModel</div>
            </div>
        )
    }
}

注意:之前写这里忘了个问题,补充一下,我也是在自己打建项目写样式的时候才发现的,使用对象模式的样式配置的问题,下面附图
比如我们需要用到less,但是我下的脚手架没有配置less的配置,所以配置下

  webpack.config.js文件
  //最重要的一点
  // ***** 这个就说加载module的.less格式==style.xxx这种形式,想要用局部的样式,
  //那么命文件名字就xx.module.less格式,你也可以改下正则
            const lessModuleRegex = /\.module\.less$/;
                                        
       //如果需要使用less，你必须按照sass的配置来写less的配置,大概在410行左右
           {
              test:lessRegex ,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
                ).concat({
                  loader:"sass-resources-loader",
                  options:{
                    resources:path.resolve(__dirname,"./../src/component/css/base.less")
                  }
                }),
                sideEffects: true,
                //modules: true, 核心的,用style的模式,编译出来是乱码的class
               // use: getStyleLoaders({ importLoaders: 2 ,}, 'less-loader'),
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                 // sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
         },
  
            /*
              解释下上面的这段代码是干嘛的,这是配置一个全局的公用样式,就是我们所说的base样式,
              需要下在这个:sass-resources-loader,这个技能解析less,又能解析sass
              .concat({
                  loader:"sass-resources-loader",
                  options:{
                    resources:path.resolve(__dirname,"./../src/component/css/base.less")
                  }
                }
*/

配置完后效果是这样的

12.png

四.如何在react中获取dom

一般有些情况我们不得已需要操作dom,你可document来获取,但是不一定会成功,因为有时候会因为子组件render顺序,导致你获取不到这个dom,vue里面有ref一样的意思,但是用法稍微有点不一样,多console.log几次就知道了

  componentDidMount() {
    const {divH}=this.state;
    /*
      如果你运用在多组件嵌套的情况下,并且你不是很会优化,
      由于 this.list 属性获取的是真实 DOM ，
      所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错或者取到空对象
    */
    if( this.refs.list){
       this.list.style.height=divH;
    }
    if(this.refs.list){
       this.refs.list.style.height=divH;
    } 
  }
   return (
            <div>
                <div
                 ref={(val) =>{
                    if(val){
                      //console.log(val),就是当前的这个dom
                      this.list=val
                    }}
                 } 
                >写法1</div>   
               <div  ref="list">写法二</div>   
            </div>
  )