React中使用CSS样式的五种方法,主流推荐CSS Modules和Styled Components

前言

由于 React的JSX语法，能在React中使用样式的方式有很多，本文主要介绍在React中经常使用CSS样式的五种方法：

 //1行内样式

// 2声明样式

// 3引入样式

// 4 CSS Modules模块化

// 5 Styled-component

 

1 行内样式

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

在JSX中的用法：

class App extends React.Component {
  // ...
  render() {
    return (
      <div style={{ background: '#eee', width: '200px', height: '200px'}}>
        <p style= {{color:'red', fontSize:'40px'}}>行内样式</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}>行内样式</p>
      </div>
    )
  }
}

注意这里实用的还是驼峰命名法，其次因为已经在外部声明了style对象，所以在JSX中使用的时候只需要一个大括号{//..}

 

 

3引入样式

引入样式就是将CSS文件写下外部，在引入使用，这种普通的引入样式实际上会有一定的问题，我们先看用法，再分析问题

用法：

css 文件

.person{
    width: 60%;
    margin:16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding:16px;
    text-align: center;
}

js文件

import React from 'react';
import './Person.css';
class App extends React.Component {

  //....  

  render() {

    return (
      <div className='person'>
        <p>person:Hello world</p>
      </div> 
    )
  }
}

export default App;

结果展示：

问题：

因为CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。那么这个时候就推荐使用CSS Modules 了

 

 

4CSS Modules

CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。具体原理可以看看阮一峰老师的博客     CSS Modules 用法教程。

在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS Modules了，详见官网。可见create-react-app对webpack零配置的追求

本段主要讲解create-react-app2.0以上版本的CSS Modules的用法：

局部样式   命名规则: xxx.module.css     

                  引入方式 import xxx from 'xxx.module.css'

                  用法：<div className={xxx.styleName}>

 

全局样式     命名规则: xxx.css   

                   引入方式 import ‘xxx.css’

                   用法：<div className='styleName'>

 

全局样式与局部样式混合使用： <div className={`styleName ${xxx['styleName']}`} >  其中styleName表示全局样式  ${xxx['styleName']表示局部样式，注意{ }内使用模板字符串 · ·

案例：

person.module.css

.person{
    width: 60%;
    margin:16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding:16px;
    text-align: center;
}

person.js

import React, { Component } from 'react';

//局部样式
import styles from './Person.module.css';

//全局样式
import '../App.css'
class App extends Component {
  
  render() {

    return (
      <div className={styles.person}>
        <p className='fz'>person:Hello world</p>
      </div> 
    )
  }
}

export default App;

查看编译后的代码：

可以看到使用了CSS Modules产生的局部样式的样式名经过编译产生了变化，样式名在项目中独一无二，从而产生局部作用域，而全局样式的样式名则没有发生变化

 

5 Styled Components

随着组件化时代的来临，前端应用开始从组件的层面对 CSS 进行封装：也就是通过 JS 来声明、抽象样式从而提高组件的可维护性；在组件加载时动态的加载样式，动态生成类名从而避免全局污染。Styled Component以组件的形式来声明样式，让样式也成为组件从而分离逻辑组件与展示组件

Styled Component是react的一个第三方库，是CSS in JS 的优秀实践和代表，将CSS写在JS中，可以实现常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。样式书写将直接依附在JSX上面，HTML、CSS、JS三者再次内聚，同时也实现H5的语义化标签表现形式。

用法：

安装：

npm install --save styled-components

简单使用：

// 创建一个 Title 组件,它将渲染一个附加了样式的 <h1> 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个 Wrapper 组件,它将渲染一个附加了样式的 <section> 标签
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 就像使用常规 React 组件一样使用 Title 和 Wrapper 
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

未完待续....