如何在 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 ...
最新文章
- Linux Xmanager
- Node初学（一）require方法
- 浅谈NLP中的对抗训练方式
- NOIP2019 Emiya家今天的饭
- 有关循环和判断的几个小问题
- php折半查找算法,二分查找 [折半查找] 算法 PHP 版
- nginx RTMP FFmpeg 视频直播
- 标准商业计划书大纲模版
- maxon电机/步科电机 CANOpen协议指令速度模式
- 运放参数的详细解释和分析
- linux 更改sh文件权限不够,linux权限不够，sh不能用
- python 相关系数（全）
- pta 循环——首字母大写
- Unity中单点和多点触控
- 在线学习系统源代码_学习系统设计和软件体系结构必看的5门在线免费课程
- 最全的软件测试面试题（含答案）
- css3倒数两个,:nth-last-child()
- 编程中无穷大的设定 很多人可能设为0x7fffffff,这个数的确是32-bit int的最大值，符号位为0，其他的都是1 但在很多情况下，0x7fffffff会出现错误，比如溢出，这样两个无穷大数相
- 斯坦福大学计算机排名多少,斯坦福大学全球排名第几
- 为什么说虚拟主机是个人站长的最佳选择
热门文章