样式污染问题

发布时间:2022-06-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了样式污染问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在react中,如果有相同的样式类名,但是里面的样式不一样,则会导致下面的组件会把上面的组件样式污染,解决这个问题又很多方法

第一种:less嵌套

第二种:探讨

我们假设要实现这样一个效果

样式污染问题

然后两个组件使用了相同的类名,如下图:

样式污染问题

 

在组件中引用
import React,{Component} from 'react';
import Hello from './components/Hello'
import Welcome from './components/Welcome'
export default class App extends Component{
  render(){
    return (
      <div>
        <Hello/>
        <Welcome/>
      </div>
    )
  }
}

查看效果:

样式污染问题

 

 我们发现welcome组件的样式将Hello组件的样式给污染了

解决问题:

将index.css改成index.module.css,将样式文件转换成一个模板文件
import hello from './index.module.css'
import { Component } from 'react'
export default class Welcome extends Component{
  render() {
    return (
      <div className={hello.title}>Hello</div>
    )
  }
}

效果:

样式污染问题

 

一般我们很少用这种方法,基本上less样式嵌套之类的可以解决,只是想让大家知道有这种方法

还记得看webpack视频时候,有句话,万物皆可模块化

 

脚本宝典总结

以上是脚本宝典为你收集整理的样式污染问题全部内容,希望文章能够帮你解决样式污染问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: