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>
);

CSS Modules和Styled Components相关推荐

我如何使用React，Redux-Saga和Styled Components构建NBA球员资料获取器
by Jonathan Puc 乔纳森·普克(Jonathan Puc) 我如何使用React,Redux-Saga和Styled Components构建NBA球员资料获取器 (How I buil ...
less和sass支持 css modules 一样的局部环境和使用方式，解决重名样式覆盖的问题
安装 npm install --save-dev node-sass sass-loader css-loader: css-loader 会对 @import 和 url() 进行处理,就像 js ...
css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
CSS Modules 用法教程
学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法. 为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言.从最早的Less.SASS,到后来的 Po ...
CSS Modules入门教程
为什么引入CSS Modules 或者可以这么说,CSS Modules为我们解决了什么痛点.针对以往我写网页样式的经验,具体来说可以归纳为以下几点: 全局样式冲突过程是这样的:你现在有两个模块,分 ...
[Vue]Scoped Css与Css Modules的区别
均为解决CSS全局作用域问题(样式冲突(污染))的一个解决方案. 1.Scoped CSS 当 <style> 标签有 scoped 属性时,相当于在元素中添加了一个唯一属性用来区分. & ...
css-modules,可视化介绍CSS Modules是什么？
你是否曾经为组件设计过样式,却只知道应用了不需要的CSS规则? 也许你会重新考虑CSS的另一个部分,所以规则不适用,或者你会添加!important规则,只是为了让它发挥作用. 这就是CSS Modu ...
css-modules,CSS Modules 方案
在讲CSS Modules之前,先想想什么是CSS Module? 在我眼中CSS Module是对css进行模块化的管理,更加深入的解释就是用来管理css样式的导入与导出.灵活按需导入以便复用代码, ...

CSS Modules和Styled Components

CSS Modules和Styled Components相关推荐

最新文章

热门文章