react VS vue 样式问题

最新推荐文章于 2024-06-27 10:59:14 发布

userZhangGuoDong

最新推荐文章于 2024-06-27 10:59:14 发布

阅读量1.1k

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/userZhangGuoDong/article/details/123615025

版权

样式覆盖：css文件并没有作用域，默认也无法模块化，当有相同的类定义时，会出现样式覆盖。

一、在vue项目中，如果修改第三方组件样式，需要/deep/穿透；而在react中则需要：global:{

}

#main{
    :global{
        
        .antd_layout{

            width:100%
        }
        
    }
}

二、react并未解决样式覆盖的问题，而vue则很好的对css进行了模块化，原理是style上的scoped属性，会让每个元素生成一个不同的属性值。

三、css moudle 或 css in js

react主流的有两种解决方案：

moudle css，是不局限于react项目的，它是由webpack打包支持的，但是react脚手架中已经集成了可以只接使用。

1、将css文件命名为list.moudle.css

2、组件中引入 import list from './list.moudlr.css'

3、className={style.xxx}

css in js,这是一种理念，将css写入到js中，通过js代码对样式进行描述。这样的有点可以使得js可一动态控制样式，并且样式文件也是一个组件，践行base-component理念，不再将css局限在模块化，停留在文件管理层次，而提高大组件层次上来。

成熟的css in js方案：styles-component

关注