面试官：将CSS引入React有哪些方式？区别？
时间：2023-03-21 14:33:46
科技观察
本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。1、什么是组件化开发？选择合适的css方案尤为重要。通常遵循以下规则：本地css可以写，不能随意污染其他组件中的原有组件；可以写动态css，获取当前组件的一些状态。根据状态变化生成不同的css样式；支持所有css特性：伪类、动画、媒体查询等；写起来简单方便，最符合css风格特点，这方面vue使用css更简洁：通过style标签写样式。scoped属性决定了书写风格是否局部有效。lang属性设置预处理器内联样式样式，根据最新状态设置和更改css。在React中，CSS的引入不如Vue方便简洁。其介绍css有很多种方式，各有优缺点。2.方式引入CSS的常用方式有：直接在组件中使用组件中导入.css文件组件中导入.module.css文件CSS中的CSS直接在组件中使用直接在组件中编写css样式，直接导入通过style属性，如下：importReact,{Component}from"react";constdiv1={width:"300px",margin:"30pxauto",backgroundColor:"#44014C",//驼峰方法minHeight:"200px",boxSizing:"border-box"};classTestextendsComponent{constructor(props,context){super(props);}render(){return(
);}}exportdefaultTest;正如您在上面看到的，css属性需要转换为驼峰大小写。这种方式的优点：内联样式，样式之间没有样式冲突，可以动态获取当前状态中的状态。缺点：在写作方面，需要使用驼峰式大小写有的样式不提示大量样式，代码混乱。有些样式不能写（比如伪类/伪元素）。将css文件导入组件。将css单独写在一个css文件中，然后直接将App.css文件导入到组件中：.title{color:red;font-size:20px;}.desc{color:green;text-decoration:underline;}中引入组件：importReact,{PureComponent}from'react';importHomefrom'./Home';import'./App.css';exportdefaultclassAppextendsPureComponent{render(){return(
我是App的标题我在App的一段文字描述 )}}这种方式的缺点是样式是全局有效的，样式之间会相互影响。在组件中引入.module.css文件并转换css文件作为模块引入，本模块所有css只作用于当前组件它不会影响当前组件的后代组件。这种方法是webpack代理的解决方案。只需要在webpack配置文件中配置modules:true即可importReact,{PureComponent}from'react';importHomefrom'./Home';import'./App.module.css';exportdefaultclassAppextendsPureComponent{render(){return(
我是App的标题我在App的一段文字描述 )}}这种方法可以解决局部作用域的问题，但是也有一定的缺陷：引用的类名不能使用连接符（.xxx-xx），所有javascript无法识别的类名都必须写成这种形式{style.className}的。动态修改部分样式不方便，仍需使用内联样式；CSSinJSCSS-in-JS表示CSS由JavaScript生成而不是在外部文件中定义的模式。这个功能不是React的一部分，而是由第三方库提供的，例如：styled-componentsemotionglamorous下面主要看一下styled-components的基本用法通过函数调用，最终创建一个组件：这个组件将自动添加一个不重复的类styled-components会为类添加相关的样式。基本用法如下：创建一个style.js文件存放样式组件：exportconstSelfLink=styled.div`height:50px;border:1pxsolidred;color:yellow;`;exportconstSelfButton=styled.div`height:150px;width:150px;颜色:${props=>props.color};background-image:url(${props=>props.src});background-size:150px150px;`;引入样式组件也很简单：importReact,{Component}from"react";import{SelfLink,SelfButton}from./style";classTestextendsComponent{constructor(props,context){super(props);}render(){return(
app.jsSelfButton
);}}exportdefaultTest;3.区别通过上面四种样式的介绍，可以看到：直接在组件中使用css，写起来简单，根据state修改样式属性也很容易，但是大量的demo写法很容易导致代码混乱。组件中引入.css文件符合我们日常的书写习惯，但是范围是全局的，样式会层叠。引入.module.css文件可以解决局部作用域的问题，但是不方便动态修改样式。需要使用inline来写样式。css在js中的方法可以满足大部分场景的应用，可以类似于预处理器，比如样式嵌套，定义，state的修改等，至于使用react引入css采用哪种方案，没有绝对的答案，您可以根据自己的情况选择合适的解决方案。参考https://zh-hans.reactjs.org/docs/faq-styling.html#gatsby-focus-wrapperhttps://mp.weixin.qq.com/s/oywTpNKEikMXn8QTBgITow
