React 中引入 CSS 高阶用法的方案详解
一、是什么
组件式开发选择合适的css
解决方案尤为重要
通常会遵循以下规则:
- 可以编写局部css,不会随意污染其他组件内的原生;
- 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;
- 支持所有的css特性:伪类、动画、媒体查询等;
- 编写起来简洁方便、最好符合一贯的css风格特点
在这一方面,vue
使用css
起来更为简洁:
- 通过 style 标签编写样式
- scoped 属性决定编写的样式是否局部有效
- lang 属性设置预处理器
- 内联样式风格的方式来根据最新状态设置和改变css
而在react
中,引入CSS
就不如Vue
方便简洁,其引入css
的方式有很多种,各有利弊
二、方式
常见的CSS
引入方式有以下:
在组件内直接使用组件中引入 .css 文件组件中引入 .module.css 文件CSS in JS 在组件内直接使用
直接在组件中书写css
样式,通过style
属性直接引入,如下:
import React from "react"; //驼峰命名法声明属性 const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", minHeight: "200px", boxSizing: "border-box" }; export default const App = () => { constructor(props, context) { super(props); } render() { return ( <div> <div style={div1}>123</div> <div style={{backgroundColor:"red"}}> </div> ); } }
上面可以看到,css
属性需要转换成驼峰写法
这种方式优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前state中的状态
缺点:
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式, 代码混乱
- 某些样式无法编写(比如伪类/伪元素)
组件中引入css文件
将css
单独写在一个css
文件中,然后在组件中直接引入
App.css
文件:
.title { color: red; font-size: 20px; } .desc { color: green; text-decoration: underline; }
组件中引入:
import React, { PureComponent } from 'react'; import Home from './Home'; import './App.css'; export default const App = () => { render() { return ( <div className="app"> <h2 className="title">我是App的标题</h2> <p className="desc">我是App中的一段文字描述</p > <Home/> </div> ) } }
这种方式存在不好的地方在于样式是全局生效,样式之间会互相影响
组件中引入 .module.css 文件
将css
文件作为一个模块引入,这个模块中的所有css
,只作用于当前组件。不会影响当前组件的后代组件
这种方式是webpack
的方案,只需要配置webpack
配置文件中modules:true
即可
import React, { PureComponent } from 'react'; import Home from './Home'; // document.getElementById("root") import styles from "./index.module.css"; export default const App = () => { render() { return ( <div className={styles.root}> <h2 className="title">我是App的标题</h2> <p className="desc">我是App中的一段文字描述</p > <Home/> </div> ) } }
这种方式能够解决局部作用域问题,但也有一定的缺陷:
- 引用的类名,不能使用连接符(.xxx-xx),在 JavaScript 中是不识别的
- 所有的 className 都必须使用 {style.className} 的形式来编写
- 不方便动态来修改某些样式,依然需要使用内联样式的方式;
CSS in JS
CSS-in-JS, 是指一种模式,其中CSS
由 JavaScript
生成而不是在外部文件中定义
此功能并不是 React 的一部分,而是由第三方库提供,例如:
- styled-components
- emotion
- glamorous
下面主要看看styled-components
的基本使用
本质是通过函数的调用,最终创建出一个组件:
- 这个组件会被自动添加上一个不重复的class
- styled-components会给该class添加相关的样式
基本使用如下:
创建一个style.js
文件用于存放样式组件:
export const SelfLink = styled.div` height: 50px; border: 1px solid red; color: yellow; `; export const SelfButton = styled.div` height: 150px; width: 150px; color: ${props => props.color}; background-image: url(${props => props.src}); background-size: 150px 150px; `;
引入样式组件也很简单:
import React from "react"; import { SelfLink, SelfButton } from "./style"; export default const App = () =>{ constructor(props, context) { super(props); } render() { return ( <div> <SelfLink title="People's Republic of China">app.js</SelfLink> <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}> SelfButton </SelfButton> </div> ); } }
三、区别
通过上面四种样式的引入,可以看到:
- 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性,但是大量的演示编写容易导致代码混乱
- 组件中引入 .css 文件符合我们日常的编写习惯,但是作用域是全局的,样式之间会层叠
- 引入.module.css 文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写
- 通过css in js 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等
至于使用react
用哪种方案引入css
,并没有一个绝对的答案,可以根据各自情况选择合适的方案
到此这篇关于React 中引入 CSS 高阶用法的方案详解的文章就介绍到这了,更多相关React 引入 CSS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
React-router v6在Class组件和非组件代码中的正确使用
这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03React-hook-form-mui基本使用教程(入门篇)
react-hook-form-mui可以帮助开发人员更轻松地构建表单,它结合了React Hook Form和Material-UI组件库,使用react-hook-form-mui,开发人员可以更快速地构建表单,并且可以轻松地进行表单验证和数据处理,本文介绍React-hook-form-mui基本使用,感兴趣的朋友一起看看吧2024-02-02React Native基础入门之调试React Native应用的一小步
这篇文章主要给大家介绍了关于React Native基础入门之调试React Native应用的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2018-07-07
最新评论