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/

巴特西

React中使用CSS的N种方式

最新文章

热门文章