如何在React中引入CSS？
时间：2023-03-18 16:18:43
科技观察
1.什么是组件化开发？选择合适的CSS方案尤为重要。通常遵循以下规则：本地CSS可以写，不能随意污染其他组件中的原生组件；可以编写动态CSS。css，可以获取当前组件的一些状态，根据状态变化生成不同的css样式；它支持所有的css特性：伪类、动画、媒体查询等；写起来简单方便，最好符合一贯的css风格特点。在这方面，vue使用css更为简洁：通过style标签使用scoped属性写入样式，判断写入的样式是否在本地有效。lang属性设置预处理器内联样式样式，根据最新状态设置和更改css。在React中，引入CSS不如Vue方便简洁。引入CSS的方法有很多种，每种方法都有自己的优点和缺点。2.方式引入CSS的常见方式有：直接使用组件将.css文件导入组件，将.module.css文件导入组件，在组件中直接在JS中使用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(
);}}导出默认测试；正如您在上面看到的，css属性需要转换为驼峰式大小写。这种方式的优点：内联样式，样式之间不会有冲突，可以动态获取当前状态中的状态。缺点：写作时需要使用驼峰式。有的样式不提示大量样式，代码混乱。有些样式写不出来（比如伪类/伪元素）将css文件导入到组件中，将css单独写在一个css文件中，然后直接导入到组件中。App.css文件：.title{颜色：红色；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';从“./Home”导入主页；导入'./应用程序。module.css';exportdefaultclassAppextendsPureComponent{render(){return(
我是App的标题IamatextdescriptioninApp )}}这种方法可以解决局部作用域的问题，但是也有一定的缺陷：引用的类名不能使用连接符(.xxx-xx)，在JavaScript中无法识别。所有的类名必须写成{style.className}的形式。动态修改部分样式不方便，仍需使用内联样式；CSSinJSCSS-in-JS，是指CSS由JavaScript生成而不是在外部文件中定义的一种模式。这个功能不是React的一部分，而是由第三方库提供的，例如：styled-componentsemotionglamorous下面主要看styled-components的基本使用，本质上就是通过函数调用来创建一个组件：这个组件将是automaticallyaddedwithanon-repeatingclassstyled-components将相关样式添加到类中。基本用法如下：创建一个style.js文件用于存放样式组件：exportconstSelfLink=styled.div`height:50px;边框：1px纯红色；颜色：黄色；`；导出常量SelfButton=styled.div`高度：150px；宽度:150px;颜色：${props=>props.color};背景图片：url(${props=>props.src});背景大小：150px150px;`;引入样式组件也很简单：importReact,{Component}from"react";import{SelfLink,SelfButton}from"./style";classTestextendsComponent{constructor(props,context){super(props);}render(){return(
app.jsSelfButton
);}}导出默认测试；3.区别通过上面四种样式的介绍可以看出，直接在组件中使用css写起来很简单，根据状态修改样式属性也很简单，但是大量的demo写法会容易导致代码混乱的组件中引入.css文件，符合我们日常的书写习惯，但是范围是全局的，样式会级联。导入.module.css文件可以解决局部作用域的问题，但是动态修改样式不方便，需要使用inline的方式在css中写样式，在js方法中可以满足大部分场景的应用，并且可以嵌套样式，定义，修改状态等类似于预处理器。没有绝对的答案，大家可以根据自己的情况选择合适的方案
