样式冲突

• 在vue或者react开发中任意出现样式冲突覆盖的问题,父子组件中使用了同一个元素,css选择器中使用了同一个选择器,给他们添加样式的时候就会重新样式覆盖的问题,导致奇怪的样式发生,子组件中的样式会覆盖掉父组件的样式,因为子组件后面渲染就会造成样式覆盖的现象

vue

• vue中我们可以通过vue中的模板引擎里面的style标签里面设置scope,给当前组件设置一个局部作用域,css样式只在当前组件生效,这样就不会造成样式覆盖了

react

• 在react中也会出现样式覆盖的问题,我们可以在发生样式覆盖的子组件中改变css文件的文件名为index.module.css,在组件中改变引用css的方法,就能做到样式隔离不会样式覆盖啦

注意点

开发当中一定要做样式隔离!