摘要:的规则是全局的,任何一个组件的样式规则,都对整个页面有效。相信写的人都会遇到样式冲突污染的问题。自动生成的类名基本就是唯一的,大大降低了项目中样式覆盖冲突的几率。关于更详细的介绍可以参考这篇博客
CSS 的规则是全局的,任何一个组件的样式规则,都对整个页面有效。相信写css的人都会遇到样式冲突(污染)的问题。
在App.js中我们引入子组件Child和style.css
import React from "react"; import Child from "./Child"; import "./style.css"; const App = () => { return () } export default App;hello
style.css
.aaa { background-color: red; }
然后Child中又引入了style1.css文件, 我们一不小心把style1.css中的样式又写成了aaa,按照预期的结果App组件的p标签背景色应该是红色,Child组件中的p标签背景色是蓝色,那是不是这样的呢?
child.js
import React from "react"; import "./style1.css"; const Child = () => { return () } export default Child;child
style1.css
.aaa { background-color: blue; }
我们yarn start启动项目,可以看到页面两个标签都是显示红色
这是因为我们在App中通过这样的方式引入import "./style.css";它的样式作用于全局,如果我们不注意命名的话极有可能造成样式名重复的问题,进而造成上面样式冲突的问题
为了解决全局污染的问题,那就把class命名写长一点吧、加一层父级选择器、降低冲突的几率,那么CSS命名混乱了
CSS 模块化的解决方案有很多,但主要有三类:
(1)、命名约定规范化CSS的解决方案如:BEM、OOCSS、AMCSS、SMACSS
(2)、CSS in JS彻底抛弃 CSS,用 JavaScript 写 CSS 规则,styled-components就是其中代表。
安装
npm install --save styled-components
一般在做项目开始时,我们都会定义一些初始化样式,这些样式都是全局有效的,那么使用这个方法该怎么定义这些全局样式呢?
最新版的 styled-components v4 已经将原有的injectGlobal() 方法替换成了createGlobalStyle() ,而且用法也和之前的 injectGlobal 方法不同了
在src下新建一个style.js(注意这里是js后缀而不是css后缀,因为我们要在js中写css)
1、引入新的API createGlobalStyle ,在下面创建一个 GlobalStyle 变量,用 createGlobalStyle 方法把全局样式包裹在其中(包裹css样式使用反引号字符串)
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; } `;
2、在 src/App.js"中(一般是最外层组件),引入刚刚定义的 GlobalStyle ,然后将
import React from "react"; import { GlobalStyle } from "./style"; import Header from "./common/header"; function App() { return (); } export default App;
像这样引用好之后,就可以正常使用全局样式啦
上面是使用styled-components工具定义全局样式的方法,那么定义局部样式该如何使用呢?(这里只介绍最简单的用法,具体可以参考官网)
在Header组件所处的文件夹下新建一个自己的样式文件style.js
import styled from "styled-components"; export const HeaderWrapper = styled.div` position: relative; height: 56px; border-bottom: 1px solid #f0f0f0; background: red; `;
上面我们导出了一个标签div,这个标签中带有一些样式,使用styled-components后这个标签也变成了一个组件HeaderWrapper并已导出,接着我们在Header组件中就可以使用这个组件了
import React, { Component } from "react"; import { HeaderWrapper } from "./style"; class Header extends Component { render() { return (111 ) } } export default Header;
返回页面可以看到,样式生效
并且通过这种方式生成的样式名是随机的,这样就不会出现样式名冲突的问题,并且这个标签组件HeaderWrapper只在当前Header组件中使用。那么样式就只会在这个Header组件中生效
使用JS编译原生的CSS文件,使其具备模块化的能力,代表是CSS Modules
CSS Modules不是将CSS改造的具有编程能力,而是加入了局部作用域、依赖管理,这恰恰解决了最大的痛点。可以有效避免全局污染和样式冲突,能最大化地结合现有 CSS 生态和 JS 模块化能力
webpack 自带的 css-loader 组件,自带了 CSS Modules,通过简单的配置即可使用
在React脚手架工具中,我们通过npm run eject将webpack配置文件暴露出来,找到webpack.config.js文件,在这个地方加上这句
修改webpack配置之后我们需要重启服务,返回页面可以看到之前通过这种方式引入的样式就不生效了import "./style.css";
现在我们要使用需要通过这样引入
import styles from "./style.css";
然后在下面通过这样的方式使用
const App = () => { return () }hello
同样在Child中
import React from "react"; import styles from "./style1.css"; const Child = () => { return () } export default Child;child
刷新页面,可以看到虽然两个文件中的样式名都是aaa,但是现在他们之间互不影响
这是因为CSS Modules 对 CSS 中的 class 名都做了处理,使用对象来保存原 class 和混淆后 class 的对应关系。CSS Modules自动生成的class类名基本就是唯一的,大大降低了项目中样式覆盖冲突的几率。
关于CSS Module更详细的介绍可以参考这篇博客(https://segmentfault.com/a/11...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114732.html
摘要:介绍背景最近和部门老大,一起在研究团队前端新手村的建设,目的在于帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介绍 1. 背景 最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设...
摘要:还可以用作文件加载使用,详细请看。实用命令除了简单运行,还可以添加几个参数,方便部署文件处理。以上仅仅介绍了前端开发最基本的用法,更多参数以及功能使用,参考官网 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
摘要:还可以用作文件加载使用,详细请看。实用命令除了简单运行,还可以添加几个参数,方便部署文件处理。以上仅仅介绍了前端开发最基本的用法,更多参数以及功能使用,参考官网 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
摘要:还可以用作文件加载使用,详细请看。实用命令除了简单运行,还可以添加几个参数,方便部署文件处理。以上仅仅介绍了前端开发最基本的用法,更多参数以及功能使用,参考官网 作者:Jogis原文链接:https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
webpack基于node,因此想要学习webpack首先要安装node。webpack4要安装node8.2以上版本。 1、安装webpack 为什么选择本地安装,主要是由于以后介绍热更新这一部分不会报错,如果全局安装热更新就会报错,以本部分为基础依次介绍,保证各部分不会出错。 mkdir webpack-test cd webpack-test npm init //初始化npm,都选择默认,...
阅读 693·2021-11-17 09:33
阅读 3725·2021-09-01 10:46
阅读 1736·2019-08-30 11:02
阅读 3260·2019-08-29 15:05
阅读 1381·2019-08-26 11:39
阅读 2245·2019-08-23 17:04
阅读 1957·2019-08-23 15:43
阅读 1353·2019-08-23 14:12