如何在 React 中优雅的写 CSS？CSS作用域隔离
目录
方案一： namespaces
方案二：CSS in JS
1. styled-jsx
2. styled-components
安装
全局样式
局部(组件)样式
方案三：CSS Modules
用了 React 很久了，关于 react 中 css 作用域隔离一直不爽，这里总结一下在 React 中 优雅的写css。
- 方案一：namespaces
- 方案二：CSS in JS
- 方案三：CSS Modules
方案一： namespaces
利用约定好的命名来隔离 CSS 的作用域。这种方式不多加描述，大家都懂。
方案二：CSS in JS
目前的 CSS in JS 的第三方库有60余种，介绍两款我在使用的库
- styled-jsx
- styled-components
1. styled-jsx
我在之前的文章中有写过它，你可以参阅
在 create-react-app 中使用 styled-jsx_五虎战画戟-CSDN博客yarn add react-app-rewired customize-cra在 package.json 中替换/* package.json */ "scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",- ".https://blog.csdn.net/qq_41887214/article/details/120523661语法：
import React from "react";export default () => {return (<div className='container'><section className='main'><h1>111111</h1></section><style jsx>{`.container {height: 100vh;background: royalblue;}.main {height: 300px;background: #61dafb;}`}</style></div>);
}缺点：但是 styled-jsx 的缺点在于，它无法修改第三方UI组件的样式，这让我很痛心。当我要修改第三方UI组件时只能用 css namespaces 使用
优点：但是优点也很明显，语法和 css 一致，没有学习成本
2. styled-components
安装
npm install --save styled-components全局样式
// style.js
import { createGlobalStyle } from 'styled-components'export const GlobalStyle = createGlobalStyle`html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}
`;项目入口文件index.js中加载全局样式 style.js
import React from 'react';
import ReactDOM from 'react-dom';
import { GlobalStyle} from './style.js';
import App from './App';ReactDOM.render(<><GlobalStyle/><App/></>,document.getElementById('root')
);局部(组件)样式
对于一个特定的组件，我们可以事先在render函数中，用组件的命名方式替换原本的div等标签
import React, {Component} from 'react'
import {HeaderWrapper,Nav,NavItem
} from './style'class Header extends Component {render() {return (<HeaderWrapper><Nav><NavItem className='left active'>首页</NavItem><NavItem className='left'>下载App</NavItem><NavItem className='right'>登陆</NavItem><NavItem className='right'><span className='icon'>
如何在 React 中优雅的写 CSS？CSS作用域隔离相关推荐
- boost::unorder_map如何插入元素_「React」如何在React中优雅的实现动画
最简单的动画组件实现 动画的本质,无非就是一个状态样式到另一个状态样式的过渡.最简单的动画组件,我们只需要指定两个状态的样式(进入的样式,离开的样式),以及一个开关(控制状态),即可完成. codep ...
- 如何在React中做到jQuery-free
前言 前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章,「如何做到 jQuery-free?」.这篇文章讨论的问题,在今天来看仍不过时,其中的一些点的讨论主要是面向新内核现代浏览器的标准 DO ...
- 如何在MyBatis中优雅的使用枚举
From: https://segmentfault.com/a/1190000010755321 问题 在编码过程中,经常会遇到用某个数值来表示某种状态.类型或者阶段的情况,比如有这样一个枚举: p ...
- 如何在vscode中优雅的编写C语言
如何在vscode中优雅的编写C语言 各位好,我认为vscode编辑器在windows环境下除了Pycharm外是最方便的IDE了,但在初学C语言时很少有人的第一个C语言软件使用的是vscode来编译 ...
- react网格生成_如何在React中构建实时可编辑数据网格
react网格生成 by Peter Mbanugo 彼得·姆巴努戈(Peter Mbanugo) 如何在React中构建实时可编辑数据网格 (How to Build a Real-time Edi ...
- 如何在React中引入阿里图标库的图标
一.周所周知 在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
- 如何在React中使用Typescript
TypeScript can be very helpful to React developers. TypeScript对React开发人员可能非常有帮助. In this video, Ben ...
- easyswoole数据库连接池_如何在 Swoole 中优雅的实现 MySQL 连接池
如何在 Swoole 中优雅的实现 MySQL 连接池 一.为什么需要连接池 ? 数据库连接池指的是程序和数据库之间保持一定数量的连接不断开, 并且各个请求的连接可以相互复用, 减少重复连接数据库带来 ...
- react 中渲染html_如何在React中识别和解决浪费的渲染
react 中渲染html by Nayeem Reza 通过Nayeem Reza 如何在React中识别和解决浪费的渲染 (How to identify and resolve wasted r ...
- 如何在React中从其父组件更改子组件的状态
by Johny Thomas 约翰尼·托马斯(Johny Thomas) 如何在React中从其父组件更改子组件的状态 (How to change the state of a child com ...
最新文章
- Samba服务器配置（1）－－源码安装
- SPOJ Problem 6219:Edit distance
- 连接ebay服务器时系统出现问题,客户端从服务器收到SOAP Fault：验证ebay失败
- Mac下使用Fiddler
- BlogEngine.Net架构与源代码分析系列part5：对象搜索——IPublishable与Search
- 券商结算VS托管行结算
- LQR控制基本原理（包括Riccati方程具体推导过程）
- 威纶触摸屏485轮询通讯_威纶通触摸屏与PLC实现一机多屏通讯方法
- 计算机考研用python_20年苏州大学计算机考研经验
- greenplum常用函数
- 叠积木（加权并查集）
- base64解密java代码,base64编码解码java代码
- 人人都会点数据分析 | 了解数据
- 非结构化数据的存储与查询
- debug - 用Procmon记录目标程序启动后的操作
- ACM算法训练【贪心合集】
- unity shader 边缘光,内发光,外发光,轮廓边缘光,轮廓内边缘光,轮廓外边缘光
- 基金使用计划 数学建模 matlab,01B基金使用计划(数学建模).ppt
- 什么样的域名才能算短域名?短域名还能有吗?
- 源中的 backports proposed security updates 什么意思?
热门文章