react怎么添加css样式-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

添加方法：1、使用“style={{样式代码}}”在组件内部定义css样式；2、先创建style样式对象，然后在render函数的组件中使用“style={{对象}”语句引用；3、使用“import 'css文件路径'”引入外部css文件。

本教程操作环境：windows7系统、react16版本，Dell G3电脑。

相关教程推荐：React视频教程

相对于html中引用css的三种方法，react中也有三种方法，一一相对：

1、行内样式：直接在组件内部定义

行内样式是一种最基本的写法，也就是我们最开始学HTML时写的内联样式那样，在项目中可能会比较少用到

在JSX中的用法：

class App extends React.Component {
  // ...
  render() {
    return (
      <div style={{ background: '#eee', width: '200px', height: '200px'}}>
        <p style= {{color:'red', fontSize:'40px'}}>Second Way!</p>
      </div>
    )
  }
}

需要注意的是，这里的css样式名采用驼峰命名法：如font-size →fontSize，并且你需要将CSS属性放在双大括号之间。为什么要用两个大括号？因为在JSX中渲染的JS表达式，它们必须被放在一对大括号里，{style}可以视为一个JS对象。所以第一对大括号正是将JS表达式放入JSX解析，里面的那对大括号则创建了一个style对象实例，所以在这里style是作为一个对象传入组件

2、声明样式：

声明样式其实是行内样式的一种改进写法，在render函数外部创建style对象，然后传递给组件，让css与标签分离，但实际上样式多了的话还是不太美观

class App extends React.Component {
  
//...
  
 const style1={    
      background:'#eee',
      width:'200px',
      height:'200px'
    }
  
  const style2={    
      color:'red',
      fontSize:'40px'
    }
  
  render() {
    return (
      <div style={style1}>
        <p style= {style2}>Second Way!</p>
      </div>
    )
  }
}