css.png
react css样式
在工程化中，很重要的一点就是保持各组件名称的不同，对于css来说，这点尤为重要，为了不使诸多类似的样式名称混淆，一般都会使用css编译工具，对原来的名字进行统一修改替换，确保所有名字都不重叠。
默认react是直接将样式注入到页面，并没有对name进行处理，容易产生冲突，而官方没有提供具体的主流css集成方案，社区便产生了诸多解决方案，在此对不同的方案进行简要介绍和汇总。
- css modules
由于React使用了JSX语法糖，通过JSX表达式将JS与HTML写法结合，将HTML结构直接写入JS中。
CSS Modules是把CSS 名称进行了编译，编译后将更换名字的name放入结构中。可以直接通过类似常规div style={name} className={style.name}的方式。区别是value需要使用JSX语法
具体使用:
-
开启webpack.config.dev.js中modules选项，设置为true
css_module_webpack.png
-
import style后将对应的样式类名name改为style.name
css_module1.png
最终效果
css_module_效果.png
-
(babel) react-css-modules
该方法与上述方法基本一直，不同之处在于babel会自动进行编译，完成转换过程，无须手动。 -
styled components
由于react只提供了组件化，但其并没有提供样式的封装，在此背景下，该方案便产生了，用于解决该问题，对组件进一步封装，将样式和组件封装到一起，形成带样式的组件，无须再关心样式写在哪里。
具体使用：
-
npm i styled-components 安装后进行引入
styled_components.png
-
使用带tag的模板字符串对组件样式进行编写，注意可以进行样式复用以及样式内写JSX表达式
styled_components_usage.png
结果
styled_components_结构.png
- styled jsx
与上述方法类似，支持直接在jsx中写样式。
上述各种都各有优劣，按需使用即可
其他文章可以参考
网友评论