欢迎访问雷泽体育中国历史网!

React系列十一 - React中的CSS

时间:2021-10-30 01:25作者:雷泽体育

本文摘要:源自:coderwhy前面说过,整个前端已经是组件化的天下,而CSS的设计就不是为组件化而生的,所以在现在组件化的框架中都在需要一种合适的CSS解决方案。一. React中的css方案1.1. react中的css事实上,css一直是React的痛点,也是被许多开发者吐槽、诟病的一个点。

雷泽体育

源自:coderwhy前面说过,整个前端已经是组件化的天下,而CSS的设计就不是为组件化而生的,所以在现在组件化的框架中都在需要一种合适的CSS解决方案。一. React中的css方案1.1. react中的css事实上,css一直是React的痛点,也是被许多开发者吐槽、诟病的一个点。在组件化中选择合适的CSS解决方案应该切合以下条件:可以编写局部css:css具备自己的具备作用域,不会随意污染其他组件内的原生;可以编写动态的css:可以获取当前组件的一些状态,凭据状态的变化生成差别的css样式;支持所有的css特性:伪类、动画、媒体查询等;编写起来简练利便、最好切合一贯的css气势派头特点;等等...在这一点上,Vue做的要远远好于React:Vue通过在.vue文件中编写 <style><style> 标签来编写自己的样式;通过是否添加 scoped 属性来决议编写的样式是全局有效还是局部有效;通过 lang 属性来设置你喜欢的 less、sass等预处置惩罚器;通过内联样式气势派头的方式来凭据最新状态设置和改变css;等等...Vue在CSS上虽然不能称之为完美,可是已经足够简练、自然、利便了,至少统一的样式气势派头不会泛起多个开发人员、多个项目接纳纷歧样的样式气势派头。相比而言,React官方并没有给出在React中统一的样式气势派头:由此,从普通的css,到css modules,再到css in js,有几十种差别的解决方案,上百个差别的库;大家一直在寻找最好的或者说最适合自己的CSS方案,可是到现在为止也没有统一的方案;在这篇文章中,我会先容挑选四种解决方案来先容:方案一:内联样式的写法;方案二:普通的css写法;方案三:css modules;方案四:css in js(styled-components);1.2. 普通的解决方案1.2.1. 内联样式内联样式是官方推荐的一种css样式的写法:style 接受一个接纳小驼峰命名属性的 JavaScript 工具,,而不是 CSS 字符串;而且可以引用state中的状态来设置相关的样式;exportdefaultclassAppextendsPureComponent{constructor(props){super(props);this.state={titleColor:"red"}}render(){return(<div><h2style={{color:this.state.titleColor,fontSize:"20px"}}>我是App标题</h2><pstyle={{color:"green",textDecoration:"underline"}}>我是一段文字形貌</p></div>)}}内联样式的优点:1.内联样式, 样式之间不会有冲突2.可以动态获取当前state中的状态内联样式的缺点:1.写法上都需要使用驼峰标识2.某些样式没有提示3.大量的样式, 代码杂乱4.某些样式无法编写(好比伪类/伪元素)所以官方依然是希望内团结适和普通的css来联合编写;1.2.2. 普通的css普通的css我们通常会编写到一个单独的文件。

雷泽体育

App.js中编写React逻辑代码:importReact,{PureComponent}from'react';importHomefrom'./Home';import'./App.css';exportdefaultclassAppextendsPureComponent{render(){return(<divclassName="app"><h2className="title">我是App的标题</h2><pclassName="desc">我是App中的一段文字形貌</p><Home/></div>)}}App.css中编写React样式代码:.title{color:red;font-size:20px;}.desc{color:green;text-decoration:underline;}这样的编写方式和普通的网页开发中编写方式是一致的:如果我们根据普通的网页尺度去编写,那么也不会有太大的问题;可是组件化开发中我们总是希望组件是一个独立的模块,即即是样式也只是在自己内部生效,不会相互影响;可是普通的css都属于全局的css,样式之间会相互影响;好比编写Home.js的逻辑代码:importReact,{PureComponent}from'react';import'./Home.css';exportdefaultclassHomeextendsPureComponent{render(){return(<divclassName="home"><h2className="title">我是Home标题</h2><spanclassName="desc">我是Home中的span段落</span></div>)}}又编写了Home.css的样式代码:.title{color:orange;}.desc{color:purple;}最终样式之间会相互层叠,只有一个样式会生效;1.2.3. css modulescss modules并不是React特有的解决方案,而是所有使用了类似于webpack设置的情况下都可以使用的。可是,如果在其他项目中使用,那么我们需要自己来举行设置,好比设置webpack.config.js中的modules: true等。可是React的脚手架已经内置了css modules的设置:.css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等;之后就可以引用而且举行使用了;使用的方式如下:css modules用法这种css使用方式最终生成的class名称会全局唯一:生成的代码结构css modules确实解决了局部作用域的问题,也是许多人喜欢在React中使用的一种方案。

可是这种方案也有自己的缺陷:引用的类名,不能使用毗连符(.home-title),在JavaScript中是不识此外;所有的className都必须使用{style.className} 的形式来编写;不利便动态来修改某些样式,依然需要使用内联样式的方式;如果你以为上面的缺陷还算OK,那么你在开发中完全可以选择使用css modules来编写,而且也是在React中很受接待的一种方式。二. CSS in JS2.1. 认识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 developmenthttps://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc品评声音虽然有,可是在我们看来许多优秀的CSS-in-JS的库依然很是强大、利便:CSS-in-JS通过JavaScript来为CSS赋予一些能力,包罗类似于CSS预处置惩罚器一样的样式嵌套、函数界说、逻辑复用、动态修改状态等等;依然CSS预处置惩罚器也具备某些能力,可是获取动态状态依然是一个欠好处置惩罚的点;所以,现在可以说CSS-in-JS是React编写CSS最为受接待的一种解决方案;现在比力盛行的CSS-in-JS的库有哪些呢?styled-componentsemotionglamorous现在可以说styled-components依然是社区最盛行的CSS-in-JS库,所以我们以styled-components的解说为主;安装styled-components:yarnaddstyled-components2.2. styled-components2.2.1. 标签模板字符串ES6中增加了模板字符串的语法,这个对于许多人来说都市使用。可是模板字符串另有另外一种用法:标签模板字符串(Tagged Template Literals)。

我们一起来看一个普通的JavaScript的函数:functionfoo(...args){console.log(args);}foo("HelloWorld");正常情况下,我们都是通过 函数名() 方式来举行挪用的,其实函数另有另外一种挪用方式:foo`HelloWorld`;//[["HelloWorld"]]如果我们在挪用的时候插入其他的变量:模板字符串被拆分了;第一个元素是数组,是被模块字符串拆分的字符串组合;后面的元素是一个个模块字符串传入的内容;foo`Hello${name}`;//[["Hello",""],"kobe"];在styled component中,就是通过这种方式来剖析模块字符串,最终生成我们想要的样式的2.2.2. styled基本使用styled-components的本质是通过函数的挪用,最终建立出一个组件:这个组件会被自动添加上一个不重复的class;styled-components会给该class添加相关的样式;好比我们正常开发出来的Home组件是这样的花样:<div><h2>我是Home标题</h2><ul><li>我是列表1</li><li>我是列表2</li><li>我是列表3</li></ul></div>我们希望给外层的div添加一个特殊的class,而且添加相关的样式:styled-components基本使用另外,它支持类似于CSS预处置惩罚器一样的样式嵌套:支持直接子代选择器或子女选择器,而且直接编写样式;可以通过&符号获取当前元素;直接伪类选择器、伪元素等;constHomeWrapper=styled.div`color:purple;h2{font-size:50px;}ul>li{color:orange;&.active{color:red;}&:hover{background:#aaa;}&::after{content:"abc"}}`最终效果如下2.2.3. props、attrs属性props可以穿透界说一个styled组件:constHYInput=styled.input`border-color:red;&:focus{outline-color:orange;}`使用styled的组件:<HYInputtype="password"/>props可以被通报给styled组件<HomeWrappercolor="blue"></HomeWrapper>使用时可以获取到传入的color:获取props需要通过${}传入一个插值函数,props会作为该函数的参数;这种方式可以有效的解决动态样式的问题;constHomeWrapper=styled.div`color:${props=>props.color};}添加attrs属性constHYInput=styled.input.attrs({placeholder:"请填写密码",paddingLeft:props=>props.left||"5px"})`border-color:red;padding-left:${props=>props.paddingLeft};&:focus{outline-color:orange;}`2.2.4. styled高级特性支持样式的继续编写styled组件constHYButton=styled.button`padding:8px30px;border-radius:5px;`constHYWarnButton=styled(HYButton)`background-color:red;color:#fff;`constHYPrimaryButton=styled(HYButton)`background-color:green;color:#fff;`按钮的使用<HYButton>我是普通按钮</HYButton><HYWarnButton>我是警告按钮</HYWarnButton><HYPrimaryButton>我是主要按钮</HYPrimaryButton>styled设置主题在全局定制自己的主题,通过Provider举行共享:import{ThemeProvider}from'styled-components';<ThemeProvidertheme={{color:"red",fontSize:"30px"}}><Home/><Profile/></ThemeProvider>在styled组件中可以获取到主题的内容:constProfileWrapper=styled.div`color:${props=>props.theme.color};font-size:${props=>props.theme.fontSize};`2.3. classnamesvue中添加class在vue中给一个元素添加动态的class是一件很是简朴的事情:你可以通过传入一个工具:<divclass="static"v-bind:class="{active:isActive,'text-danger':hasError}"></div>你也可以传入一个数组:<divv-bind:class="[activeClass,errorClass]"></div>甚至是工具和数组混淆使用:<divv-bind:class="[{active:isActive},errorClass]"></div>react中添加classReact在JSX给了我们开发者足够多的灵活性,你可以像编写JavaScript代码一样,通过一些逻辑来决议是否添加某些class:importReact,{PureComponent}from'react'exportdefaultclassAppextendsPureComponent{constructor(props){super(props);this.state={isActive:true}}render(){const{isActive}=this.state;return(<div><h2className={"title"+(isActive?"active":"")}>我是标题</h2><h2className={["title",(isActive?"active":"")].join("")}>我是标题</h2></div>)}}这个时候我们可以借助于一个第三方的库:classnames很显着,这是一个用于动态添加classnames的一个库。我们来使用一下最常见的使用案例:classNames('foo','bar');//=>'foobar'classNames('foo',{bar:true});//=>'foobar'classNames({'foo-bar':true});//=>'foo-bar'classNames({'foo-bar':false});//=>''classNames({foo:true},{bar:true});//=>'foobar'classNames({foo:true,bar:true});//=>'foobar'//lotsofargumentsofvarioustypesclassNames('foo',{bar:true,duck:false},'baz',{quux:true});//=>'foobarbazquux'//otherfalsyvaluesarejustignoredclassNames(null,false,'bar',undefined,0,1,{baz:null},'');//=>'bar1'我是@半糖学前端 ,专注前端技术领域分享,关注我和我一起学习,配合进步!。


本文关键词:React,系列,十一,中的,CSS,源自,coderwhy,前面,雷泽体育

本文来源:雷泽体育-www.flybeauty.cn