本文了解react中定义样式（css-less-sass）的常用方法

时间：2023-03-30 13:30:55 CSS

react使用jsx语法将html标签和js语法链接在一起，css的写法没有明确规定的写法。目前有很多不同的方法，每种方法都有自己的优点和缺点。我们来看看常用的定义方法。最基本最简单的方法就是直接内联使用，就像在html中写样式一样。不同的是jsx中的内联样式需要用小驼峰命名，不能使用破折号。{}，而定义的样式是以对象的形式存在的，也是通过{}的方式存在的，所以样式标签中好像用了两个大括号{}return(helloreact

)这种方法的好处是代码不会冲突，定义的代码作用于当前元素，如果需要动态获取state的值来设置样式，可以也要做。劣势也很明显。当样式较多时，即使将样式作为一个整体抽取出来，作为一个变量赋值给style，仍然会和业务逻辑混在一起，一些伪类等语法是写不出来的。第二种方式可以将css代码和业务逻辑代码分离，在jsx标签中定义className属性，自定义css样式文件，然后通过import引入css/scss/less等样式文件，就是Native使用的css写法，定义伪类等高级选择器写法都支持。return(helloreact

)//在单独的样式文件中定义。title{color:'blue'}这样可以让代码更清晰，并且将css样式和jsx文件分开。当需要使用多个className，或者通过state改变className时，可以用+连接字符串，或者用数组，然后用toString()转换成字符串constisActive=trueIamheading1//activefoobarIamheading2//活动我在标题3//foo,activeIamheading4//foo,activeIamheading5//fooavtive可以直接使用classnames库动态使用类名，方便使用。类名默认公开一个函数。传入的参数可以是字符串、对象和数组，null/undefined/boolean值也不会显示在页面上importclassNamesfrom'classnames'constisShow=falseconstlist=['foo','bar']我是标题6//activefoo我是Title7//activeIamheading8//activefoobar我正在前进8//100但是用react开发的页面叫单页应用，整个项目只有一个页面，样式是在a组件中引用的，即使没有引用b组件，定义了同名的类名，就会有样式，这样，如果c组件和d组件都定义了className属性，分别引入css样式来定义字体颜色，但是最后是字体两者呈现的颜色是后面导入的css文件中的字体颜色，即同名的样式会被覆盖为了解决这个问题，我们需要在根标签处定义一个className来包裹所有的标签当前组件的，这样css样式的层数就多了，也可能是因为selector的优先级（定义在外层id选择器中），导致样式冲突，不支持获取state属性来动态设置样式。return(helloreact