React中使用CSS的N种方式

1、在组件中直接使用style，注意，div1各个属性值加双引号

const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  //驼峰法
  minHeight: "200px",
  boxSizing: "border-box"
};

...省略部分代码

render() {    
　　return (     
　　　　<div style={div1}>123</div> 
 　 );  
}

2、引入外部css或scss文件 使用saas

import './assets/index.css'
import '/assets/main.scss'

3、模块化

imort index from './assets/index.css'

<div className = {index.app}>这是app</div>

需要在css-loader中进行配置

{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ]
}

4、styled-components

首先进行安装 yarn add styled-components
文档：https://styled-components.com/

5、radium

首先进行安装 yarn add radium
文档：https://formidable.com/open-source/radium/