聊一聊 React 中的 CSS 样式方案

简介:

聊一聊 React 中的 CSS 样式方案
和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案。社区中提供的方案有很多,例如 CSS Modules,styled-components,styles jsx 等等。

接下来会详细地说一下这几种方案,在说这几种方案之前,首先说一下 React 官方提供的构建工具 create-react-app 构建的项目中使用 css 的问题。

使用 create-react-app 创建的项目引入 css 文件的问题
使用 create-react-app 构建一个项目之后,会有 index.js,index.css,App.js 等文件,为了说明问题我又新建了一个 App1.js 文件,为了简便文件内容让我删除改动了一些。

index.css

.huisiyuan {
background: red
}
index.js

import App from './App';
import App1 from './App1';
import './index.css';

ReactDOM.render(

<App />
<App1 />

,
document.getElementById('root')
);
App.js

import React, { Component } from 'react';
class App extends Component {

render() {
    return <div className='huisiyuan'>组件App</div>
}

}
export default App;
App1.js

import React, { Component } from 'react';
class App1 extends Component {

render() {
    return <div className='huisiyuan'>组件App1</div>
}

}
export default App1;
index.js 中引入的 index.css 在浏览器中是出现在 head 标签下的 style 标签下,因此任何在 index.js 中使用的组件都可以使用 index.css 中的样式。

例如想让组件 App 的背景颜色为红色,index.css 中正好是这样设置的,但是 App1 中的背景颜色也会跟着变成红色。

说明了 creat-react-app 创建项目后直接使用 import 引入 css 文件出现的问题,接下来讲一下社区中提供的各种方案。

CSS Modules
CSS Modules 的核心

CSS Modules更详细的介绍可以参考阮一峰老师 CSS Modules 用法教程。

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

CSS Modules 就解决了这个问题,在一个组件中引入的类经过构建工具编译之后会变成独一无二的哈希字符串.

下面是一个 App 组件

import React, { Component } from 'react';
import xxx from 'index.css';

class App extends Component {

render() {
    return <div className={xxx.huisiyuan}>组件App</div>
}

}

export default App;
和上面引入 css 文件不同的是,这里将 index.css 文件输入到 xxx 对象,xxx.huisiyuan 代表一个 class。

.huisiyuan {
background: red;
}
构建工具会将 xxx.huisiyuan 编译成一个哈希字符串,同样 index.css 文件中的 .huisiyuan 也将被编译成同样的哈希字符串,这样这个类名就独一无二了。

这样这个类就有了局域的概念,其它组件不引入使用这个 index.css 文件就不会应用到这个类的样式,因为编译后的哈希字符串其它组件是不知道的。

一般情况下,

局部样式文件 全局样式文件
命名方式 xxx.module.css xxx.css
引入方式 import xxx from './xxx.mouule.css' import './xxx.css'
用法
huisiyuan
huisiyuan
styled-components
styled-components 见名知义就是一个带样式的组件。

React 的一个理念就是 all in JS,styled-components 将样式直接写入到组件中,得到的是一个样式的组件,在调用组件时是带着样式的。

Styled Component是react的一个第三方库,是CSS in JS 的优秀实践和代表,将CSS写在JS中,可以实现常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。

使用方法:

首先安装 style-components, npm install style-components --save.

下面的代码中 Div 就是一个带样式的组件(带样式的 Div)

import React, { Component } from 'react';
import styled from 'styled-components';

const Div = styled.div`

color: red;

`;

class App extends Component {

render() {
    return (
        <div>
            <Div big>hello world</Div>
        </div>
    ) 
}

}

export default App;
右下图可以看出,styled-components 自动给 div 加了一个 class。

styled-components 还可以获取到组件的属性,并且在定义样式时进行一些逻辑操作。

const Div1 = styled.div`

color: red;
${(props)=> props.big&&`
    font-size: 72px
    `}

`;

const Div2 = styled.div`

color: blue;
${(props)=> props.small&&`
    font-size: 30px
    `}

`;

class App extends Component {

render() {
    return (
        <div>
            <Div1 big>hello world</Div1>
            <Div2 small>hello world</Div2>
        </div>
    ) 
}

}

当 Div1 组件中有 big 属性时会设置 font-size: 72px,结果如下图。

styled jsx
见名知义就是带样式的 JSX,一般有下面三种形式。

1) 行内样式

行内样式是一种最基本的写法,和在HTML中写的元素内联样式差不多,但是设置的样式是一个对象。

hello

为什么要用两个大括号?

因为在JSX中渲染的JS表达式,它们必须被放在一对大括号里,{style}可以视为一个JS对象。所以第一对大括号正是将JS表达式放入JSX解析,里面的那对大括号则创建了一个style对象实例,所以在这里style是作为一个对象传入组件 。

2)声明样式

声明样式其实是行内样式的一种改进写法,在render函数外部创建style对象,然后传递给组件,让css与标签分离 。

const style = {

color: red,
background: blue

}

class App extends Components {

render() {
    return (
        <div style={style}>hello</div>
    )
}

}
3)引入样式文件

其实这一种是 CSS Modules 中全局样式文件的应用,在这里再提一下,用法比较简单就是将样式文件通过 import 语句引入进来,问题就是页面上的所有组件都能应用这个文件中的样式。

App.css

.huisiyuan {
color: red;
background: blue;
}
App.js

import React, { Components } from 'react';
import './App.css';
import App1 from './App1';

class App extends Components {

render() {
    return (
  <App1 >
    )
}

}
APP1.js

import React, { Components } from 'react';

class App1 extends Components {

render() {
    return (
  <div className='huisiyuan'>hello</div>
    )
}

}
在 App.js 中引入了 App.css 但是在 App1.js 中·并没有引入,但是在 App1 组件内部依然可以使用 App.css 中的样式,App1 组件中hello 应用 App.css 中的样式,如下图所示。

总结:

上面总结的三种方法,推荐使用 CSS Modules 或者 styled-components,在平时做一些小 demo 的时候可以使用 styled jsx 的方法。

完,如有不恰当之处欢迎指正哦。

author: zgc
origin: http://www.cnblogs.com/zhangguicheng/

相关文章
|
1天前
|
监控 前端开发 搜索推荐
react 表单受控的现代实现方案
`react-form-simple`是一个轻量级的React表单库,专注于简化受控表单的开发,提供数据绑定、验证、错误处理和UI更新等功能。它通过简洁的API减少复杂性,支持第三方UI库集成,并具备高度可扩展性。核心特点包括基于Proxy的数据绑定、实时错误处理、高效的UI更新和灵活的使用方式。通过`useForm`和`render`等钩子,开发者可以快速构建表单应用,同时支持动态表单和自定义验证规则。该库旨在提高开发效率,适用于复杂表单场景,降低学习和维护成本。
react 表单受控的现代实现方案
|
2天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
5 1
|
8天前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
9天前
|
前端开发
CSS优先级:如何解决样式冲突?
CSS优先级:如何解决样式冲突?
|
10天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
18 1
|
10天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
14 0
|
10天前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
18 0
|
10天前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
33 4
|
10天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
10天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。