React中css的几种使用方式

 

以下方式仅供参考，适合自己项目的才是最好的！！

一、行内样式使用

import React from 'react'
class Home extends React.Component {
  render() {
    return (
      <div>
        <h3 style={{fontColor: 'green',marginTop:'5px'}}>标题</h3>
      </div>) }
}
export default Home

注意点：
A、样式的书写连接需使用驼峰命名规则；

B、大括号，外面大括号是由于React的JSX风格需由大括号进行包裹，里面的大括号创建了一个CSS的对象；

优点：

1、书写快速；

2、局部作用域，推荐组件只用一次的类似活动页面的开发；

缺点：

1、不利于维护css；

2、增大组件复杂度；

3、可阅读性差；

4、代码量多；

二、声明样式使用

import React from 'react'
class Home extends React.Component {
  render() {
    const title = {
      fontColor: 'green',
      marginTop: '5px'
    }
    return (
      <div>
        <h3 style={tilte}>标题</h3>
      </div>) }
}
export default Home

原理和行内一毛一样，只不过将样式对象抽出来在外部声明了而已。

优点：

1、html框架与样式分离；

2、同上，这种也比较适用于短周期使用的组件界面；

缺点：

1、影响其他组件同名样式，容易导致样式混乱，全局作用域；

2、代码规范性；

三、外部引入Home.css

import React from 'react';
import './Home.css';
class Home extends React.Component {
  render() {

    return (
      <div>
        <h3 className="title">标题</h3>
      </div>) }
}
export default Home

.title = {
  fontColor: 'green',
  marginTop: '5px'
}

优点：

1、样式与界面分离，利于维护；

2、适用于系统UI风格基本奠定的应用，无大的变化，可抽取为公共样式，如common.css；

3、css代码量少；

缺点：

1、作用域为全局；

2、应用UI风格百变或者不确定的不建议使用；

四、CSS Modules 

demo可参考阮一峰的demo：https://github.com/ruanyf/css-modules-demos 介绍很详细，里面有css局部作用域、全局作用域、添加hash值等用法；

注意点：

A、需要安装CSS Modules；

B、webpack配置loaders；

优点：

1、灵活书写局部、全局作用域样式；

2、配置开启modules，渲染唯一hash样式，避免全局污染；

3、推荐技术栈成熟，约定俗成的团队应用开发；

缺点：

1、协作开发需制定并遵守开发公约，避免样式标记global混乱；

五、style Component 

一切皆可成组件，css也不外如是，原理是：在定义组件的时候直接附上组件样式，需安装依赖插件，

npm install --save styled-components

import React from 'react';
class Home extends React.Component {
  const Title = styled.h3`
    margin-top: 5px;
    font-color: green;
  `;
  render() {
    return (
      <div>
        <Title>标题</Title>
      </div>) }
}
export default Home

当然style component（Title）也可以放到外部建.js文件做import { Title } from "./style.js";

优点：

1、符合React思想，一切皆为组件，js、html、css三大巨头；

2、算是比较新的技术；

缺点：

1、需要一定的开发习惯培养；

2、嵌套组件样式的开发比较困难；

3、改动不是那么的灵活，容易重复造轮子；

六、Radium

优雅处理变量、媒体查询、伪类等，并且可以直接使用js中的数学，连接，正则表达式，条件，函数等，同样先安装 npm install radium --save-dev 再引入import radium from 'radium'进行包裹使用;

import React from "react";
import Radium from 'radium';
let styles = {
  title: {
    color: 'green',
    marginTop: '5px'
    ':hover': {
      fontColor: '16px'
    }
  },
  info: {
    color: '#666'
  }
};
class Home extends Component { 
  render() {
    return (
     <div>
      <h3 style={[ styles.title, styles.info ]}>
        标题
      </h3>
     </div>
    );
  }
}
export default Radium(Home); 

优点：

1、处理各种类型样式，变量、媒体查询、伪类等，并且可以直接使用js中的数学，连接，正则表达式，条件，函数等；

缺点：

1、全局作用域；

2、export之前Radium需包裹一层；

 

以上纯属个人见解，欢迎交流纠正，谢谢