React | React的CSS方式

已于 2023-05-25 02:58:19 修改
阅读量2.6k 收藏 4
点赞数 2
分类专栏： 教你11天学会React 文章标签： vue.js 前端 javascript 前端框架 react.js
于 2023-05-24 19:21:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderHing/article/details/130853607
版权

✨ 个人主页：CoderHing

🖥️ React.js专栏：React的CSS方式
🙋‍♂️ 个人简介：一个不甘平庸的平凡人🍬

💫 系列专栏：吊打面试官系列  16天学会Vue  11天学会React  Node专栏

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力！❤️

❤️ 本文约 3000 字，预计阅读需要 20 分钟 ❤️

目录

一、React中CSS的概述

组件化天下的CSS

React中的CSS

二、内联样式CSS写法

内联样式

三、普通CSS文件写法

普通的css

四、CSS Module写法

css modules

五、CSS in JS解决方案

认识CSS in JS

六、classnames库使用

认识styled-components

ES6标签模板字符串

styled的基本使用

props、attrs属性

styled高级特性

vue中添加class

React中添加class

一、React中CSS的概述

组件化天下的CSS

  • 前端已经是组件化的天下:

    • CSS的设计就不是为组件化而生的 所以在目前组件化的框架中都在需要一种合适的CSS解决方案

  • 在组件化中选择合适的CSS解决方案应该符合以下条件:

    • 编写局部css:css具备自己的具备作用域,不会随意污染其他组件内的元素

    • 编写动态的css:可以获取当前组件的一些状态,根据状态的变化生成不同的css样式

    • 支持所有的css特性:伪类、动画、媒体查询等

    • 编写起来简洁方便 符合一贯的css风格特点等...

React中的CSS

  • css一直是React的痛点 也是被很多开发者吐槽 诟病的一个点

  • Vue做的要好于React:

    • Vue通过在.vue文件中编写 style标签来编写自己的样式

    • 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效

    • 通过 lang 属性来设置你喜欢的 less、sass等预处理器

    • 通过内联样式风格的方式来根据最新状态设置和改变css

    • 等等...

  • Vue在CSS上虽然不能称之为完美,但是已经足够简洁、自然、方便了.至少统一的样式风格不会出现多个开发人员 多个项目采用不一样的样式风格

  • 相对而言React官方并没有给出在React中统一的样式风格:

    • 由此 从普通的css 到css modules 再到css in js 有几十种不同的解决方案 上百个不同的库

    • 大家一致在寻找最好的或者说最适合自己的CSS方案 但是到目前为止也没有统一的方案

二、内联样式CSS写法

内联样式

  • 内联样式是官方推荐的一种css样式的写法:

    • style 接收一个采用小驼峰命名属性的 JavaScript 对象 ，而不是 CSS 字符串

    • 并且可以引用state中的状态来设置相关的样式

  • 内联样式的优点:

    • 内联样式, 样式之间不会有冲突

    • 可以动态获取当前state中的状态

  • 内联样式的缺点:

    • 写法上都需要使用驼峰标识

    • 某些样式没有提示

    • 大量样式 代码混乱

    • 某些样式无法编写(比如伪类/伪元素)

  • 所以官方依然是希望内联合适和普通的css来结合编写

三、普通CSS文件写法

普通的css

  • 普通的css我们通常会编写到一个单独的文件 之后再进行引入

  • 这样的编写方式和普通的网页开发中编写方式是一致的:

    • 我们按照普通的网页标准去编写 那么也不会有太大的问题

    • 但是组件化开发中我们总是希望组件是一个独立的模块 即便是样式也只是在自己内部生效 不会相互影响

    • 但是普通的css都属于全局的css 样式之间会相互影响

  • 这种编写方式最大的问题是样式之间会相互层叠掉

四、CSS Module写法

css modules

  • css modules并不是React特有的解决方案 而是所有使用了类似于webpack配置的环境下都可以使用的

    • 如果在其他项目中使用它 那么需要自己来进行配置 比如配置webpack.config.js中的modules: true等

  • React的脚手架已经内置了css modules的配置:

    • .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等

    • 之后就可以引用并且进行使用了

  • css modules确实解决了局部作用域的问题,也是很多人喜欢在React中使用的一种方案

  • 但是这种方案也有自己的缺陷:

    • 引用的类名.不能使用连接符(.home-title),在JavaScript中是不识别的

    • 所有的className都必须使用{style.className} 的形式来编写

    • 不方便动态来修改某些样式,依然需要使用内联样式的方式

  • 如果你觉得上面的缺陷还可以接受,那么你在开发中完全可以选择使用css modules来编写,并且也是在React中很受欢迎的一种方式

五、CSS in JS解决方案

认识CSS in JS

  • 官方文档也有提到过CSS in JS这种方案:

    • “CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义

    • 此功能并不是 React 的一部分 而是由第三方库提供

    • React 对样式如何定义并没有明确态度

  • 在传统的前端开发中,我们通常会将结构（HTML）,样式（CSS）,逻辑（JavaScript）进行分离

    • React的思想中认为逻辑本身和UI是无法分离的,所以才会有了JSX的语法

    • 样式呢?样式也是属于UI的一部分

    • 事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式,并且可以方便的使用JavaScript的状态

    • 所以React又被人称之为 All in JS

  • 当然 这种开发的方式也受到了很多的批评

    • Stop using CSS in JavaScript for web development

    • https://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc

六、classnames库使用

认识styled-components

  • 在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便

    • CSS-in-JS通过JavaScript来为CSS赋予一些能力,包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等

    • 虽然CSS预处理器也具备某些能力 但是获取动态状态依然是一个不好处理的点

    • 目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案

  • 目前比较流行的CSS-in-JS的库有哪些呢?

    • styled-components

    • emotion

    • glamorous

  • 目前可以说styled-components依然是社区最流行的CSS-in-JS库

  • 安装styled-components: npm install styled-components

Ps:记得安装VsCode插件写Css哦~vscode-styled-components

ES6标签模板字符串

  • ES6中增加了模板字符串的语法,这个对于很多人来说都会使用

  • 模板字符串还有另外一种用法:标签模板字符串(Tagged Template Literals)

  • 我们一起来看一个普通的JavaScript的函数

    • 正常情况下 我们通过 函数名() 方式来进行调用的 其实函数还有另外一种调用方式

  • 如果我们在调用的时候插入其他的变量:

    • 模板字符串被拆分了

    • 第一个元素是数组 是被模块字符串拆分的字符串组合

    • 后面的元素是一个个模块字符串传入的内容

  • 在styled component中 就是通过这种方式来解析模块字符串 最终生成我们想要的样式

styled的基本使用

  • styled-components的本质是通过函数的调用,最终创建出一个组件:

    • 这个组件会被自动添加上一个不重复的class

    • styled-components会给该class添加相关的样式

  • 它支持类似于CSS预处理器一样的样式嵌套:

    • 支持直接子代选择器或后代选择器，并且直接编写 样式

    • 可以通过&符号获取当前元素

    • 直接伪类选择器、伪元素等

 

 

props、attrs属性

  • props可以传递

  • props可以被传递给styled组件

    • 获取props需要通过${}传入一个插值函数,props会作为该函数的参数

    • 这种方式可以有效的解决动态样式的问题

  • 添加attrs属性

styled高级特性

  • 支持样式的继承

  • styled设置主题

vue中添加class

  • vue中添加class是一件非常简单的事情

  • 可以通过传入一个对象

  • 也可以传入一个数组:

  • 甚至是对象和数组混合使用

React中添加class

  • React在JSX给了我们开发者足够多的灵活性.你可以像编写JavaScript代码一样.通过一些逻辑来决定是否添加某些class

  • 这个时候我们可以借助于一个第三方的库:classnames

coderHing[专注前端]
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
react-React组件的css选择器
08-15
React组件的css选择器
react使用CSS实现react动画功能示例
11-20
本文实例讲述了react使用CSS实现react动画功能。分享给大家供大家参考，具体如下： react动画： import React, { Component } from 'react'; class Boss extends Component { constructor(props) { super(props); this.state = { isShow:true } this.toTogger=this.toTogger.bind(this) } render() { return ( <div>
React 之 CSS编写方式
玄鱼殇
07-11 1391
React 之 CSS编写方式
react中使用css的5种方式
car_lic的博客
01-31 1486
react中写CSS的5种方案
总结react中css的使用
badbaby52906的博客
11-29 392
总结下react中的css使用，着重介绍了styled-components，还探究了下与vue中css的区别。
react-css:将纯CSS转换为（可选自动前缀）React样式的属性映射
05-22
Reactcss 将纯CSS转换为（可选自动前缀）React样式的属性映射。 用法 /** @jsx React.DOM */ var React = require ( "react" ) ; var fromCSS = require ( "react-css" ) . fromCSS ; /* Pre-compute the CSS to avoid lengthy calculations at each render cycle */ var myComponentStyle = fromCSS ( "{ opacity: 0.5; }" ) ; var MyComponent = React . createClass ( { render : function ( ) { return ( < div style = { myComponentStyle }
react-scoped-css：ReactCSS封装解决方案
02-04
React作用域CSS 用于ReactCSS封装解决方案 为什么 为了解决css封装的问题，主要有两种方法，css-modules和css-in-js。 但是，它们两个都有很大的问题。 开发人员的体验不好，这意味着您经常需要编写比实现简单样式所期望的更多的代码。 使用react-scoped-css，您可以编写已知的普通CSS，同时具有CSS封装的优势！ 它是如何工作的 将您CSS写入以.scoped.css结尾的文件中（也支持scss和sass ） /* Title.scoped.css */ . title { background : # 999 ; } p { color
React系列十一 - React中的CSS
qq_27009517的博客
01-29 6477
源自：coderwhy 前面说过，整个前端已经是组件化的天下，而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案。 一. React中的css方案 1.1. react中的css 事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点。 在组件化中选择合适的CSS解决方案应该符合以下条件： 可以编写局部css：css具备自己的具备作用域，不会随意污染其他组件内的原生； 可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生
React攻略秘籍二:React中使用css的五种方法（包括less与styled-compenents）
前端
10-08 5566
本文主要讲述了css在react的多种使用的方法。
React 中的 CSS
weixin_39841838的博客
03-03 179
如果你刚接触 React，你可能会对组件样式的多种写法感到疑惑。在这篇文章中，我们将讨论这些不同的方法，它们各自的优缺点，以及如何在平时的项目中去使用它们。我们不妨从最原始但在项目中...
react-react面试题之引入css的方式.zip
最新发布
03-20
react面试题 react_react面试题之引入css的方式
React用于React组件CSS构造函数-React开发
05-27
每个React组件都有一个用于功能逻辑的内置javascript构造函数。 介绍CSS构造函数的样式！ 从'react'导入React； 从'css-constructor'导入css； //吗？ 每个React组件都有一个用于功能逻辑的内置javascript构造函数。 介绍CSS构造函数的样式！ 从'react'导入React； 从'css-constructor'导入css； //:baby:超级小巧：仅压缩了1.2K！ 导出默认类Hello扩展React.Component {/ * javascript构造函数* /构造函数（props）{super（props）; } / * css构造函数* / @ css` //:locked:
React中的四种样式使用优缺点比较
qq_43955202的博客
08-31 1256
1.组件化天下下的CSS css的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方式。 组件化中选择合适的CSS解决方案应该符合以下条件： 1.可以编写局部的css：css具备自己的局部作用域，不会随意污染其他组件内部的样式。 2.可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式。 3.支持所有的css特性：伪类，动画，媒体查询等。 4.编写起来简单方便，最好符合一贯的css风格特点， 2.React中的CSS 3.react中常见
react学习 ---第八天 react的CSS方式
weixin_56663198的博客
02-13 304
1 React中CSS的概述 2 内联样式CSS写法 3 普通CSS文件写法 4 CSS Module写法 5 CSS in JS解决方案 6 classnames库使用
react引入css几种方式
qq_47801638的博客
09-15 1151
return (这种方式的好处是简单易用，不需要额外的配置或依赖。css文件中的类名可能会发生冲突，导致样式覆盖或混乱。css文件中不能使用react的状态或属性来动态改变样式。综上所述，react中引入css的方式有多种选择，小伙伴可以选择自己合适的方式。个人还是比较喜欢用第二种，代码看起来更优雅一点，如果需要用到动态样式可以使用行内样式满足需求。
React18入门（第四篇）——React中的4种CSS使用方式，CSS Module、CSS-in-Js详解
做笔记/记录遇到的前端bug
10-14 2143
React基础入门之，React4种CSS使用方式，CSS Module、CSS-in-Js详解
【React系列】React中的CSS
川峰的博客
01-02 1288
事实上，css 一直是 React 的痛点，也是被很多开发者吐槽、诟病的一个点。.vueVue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。
react如何引入css
qf2019的博客
07-23 3917
引入方法有：1、行内样式；2、声明样式，行内样式类似，区别只是声明一个变量保存样式表绑定给style属性；3、import引入，React组件一般是一个文件夹，文件夹里包含对应的js和css，只要在js中引入同级的css即可。 在React中，如果直接按上面的方式写内联样式会直接报错，因为JSX语法不支持，React支持以下三种写css的方法： 1.行内样式 2.声明样式 声明样式和行内样式类似，区别只是声明一个变量保存样式表绑定给style属性。 3.import引入 一个React组件一般就是一个
react项目vite配合css模块化
05-19
在 项目中使用 Vite 和 CSS 模块化的步骤如下： 1. 安装 Vite 在命令行工具中执行以下命令： ``` npm install vite --save-dev ``` 2. 配置 Vite 在项目根目录下创建 `vite.config.js` 文件，并添加以下内容： ```js module.exports = { css: { modules: true } } ``` 这样就开启了 CSS 模块化。 3. 编写 React 组件 在 React 组件中使用 CSS 模块化非常简单，只需要在 CSS 文件中添加 `:local` 伪类即可。例如： ```css .title :local(.text) { color: red; } ``` 在 React 组件中引入 CSS 文件时，需要使用 `import` 语句，并将样式赋值给组件的 `className` 属性。例如： ```jsx import styles from './styles.css'; function MyComponent() { return ( <div className={styles.title}> <span className={styles.text}>Hello, World!</span> </div> ); } ``` 这样就可以使用 CSS 模块化了。注意，`styles.title` 和 `styles.text` 是自动生成的类名，可以通过 `console.log(styles)` 查看。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderHing[专注前端]

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值