React CSS工程化解决方案总结

html-css023

React CSS工程化解决方案总结,第1张

在工程化中，很重要的一点就是保持各组件名称的不同，对于css来说，这点尤为重要，为了不使诸多类似的样式名称混淆，一般都会使用css编译工具，对原来的名字进行统一修改替换，确保所有名字都不重叠。

默认react是直接将样式注入到页面，并没有对name进行处理，容易产生冲突，而官方没有提供具体的主流css集成方案，社区便产生了诸多解决方案，在此对不同的方案进行简要介绍和汇总。

具体使用:

具体使用：

结果

上述各种都各有优劣，按需使用即可

其他文章可以 参考

用jQuery来获取A里面的子元素给他添加一个class类名。

让子元素高度撑满父元素高度方法：

首先不要为了加个分隔线，就增加无意义的标签。可以使用 css3 选择器、伪元素等。

例如下图：

其次，这种 row col 的方式不指定高度的，经常两个挨着的 col 高度不一样，

因此分割线没有意义，要固定他们的高度。

row col 更多的是用来布局的，这里的需求用 ul li 就行了。

1 可以再html文件中直接写css。

2 我理解楼上想问的是，现在已经有一个css文件和 html文件，怎么把css文件导入到html文件中是吗下面是我写的其中一种导入方式 ， （<link href="mystyle.css" rel="stylesheet" type="text/css"/>）

<!doctype html>

<html>

<head>

<title></title>

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

</head>

<body>

</body>

</html>