在react中使用css modules解决组件之间样式覆盖问题

2020-07-07  本文已影响0人  爱吃豆包

转载并做了修改 https://blog.csdn.net/weixin_43709908/article/details/103737953

一般项目脚手架都默认集成了 css Modules

如果是官方脚手架create-react-app

1.在命令行运行npm run eject 命令
2.运行完成之后,打开 config 目录下的 webpack.config.js 文件,找到test: cssRegex这一行
3.在 use 属性执行的方法中添加 modules: true如下图:

image

如果是Taro小程序框架

改为true即可 enable: true

weapp: {
  module: {
    postcss: {
      // css modules 功能开关与相关配置
      cssModules: {
        enable: true, // 默认为 false,如需使用 css modules 功能,则设为 true
        config: {
          namingPattern: 'module', // 转换模式,取值为 global/module,下文详细说明
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

###################################### 分割下 ############################

今天在写react项目的时候发现两个组件之间相同类名之间样式会发生覆盖的问题,上网查了一下,大佬们都推荐使用css IN JS

简单介绍一下自己的使用:come on baby

介绍:css in js是使用js编写css统称,用来解决css样式冲突,覆盖等问题

css in js 的具体实现有50多种,其中两种是比较出名的:css modules和styled-components

在react中推荐使用:css modules,因为react脚手架已经集成进来了,可以直接使用

css modules 通过对css类名的重命名,保证每一个类名的唯一性,从而避免样式冲突问题
实现方式:webpack的css-loader插件
在react脚手架中演化成:文件名,类名,hash(随机)三部分,只需要指定类名即可。
在index.module.css中我们写一个类名

.red{
     color: red;
}

通过css modules就会给我们转化成类名类似于 .Button_error_axy4s(可以不用理会转换后的)

css modules 在项目中的使用

1.首先创建一个名为index.module.css的样式文件,(这是react中约定的,与普通css区分开)

在要使用的文件中创建样式文件名称
index.module.css
2.在组件中导入样式文件(注意语法)

在要使用的文件在中进行引入
import styles from './index.module.css'
3.通过styles对象访问对象中的样式名来设置样式

<div className={styles.类名}></div>
注:我们在写项目的时候,避免不了使用ui组件,我们要想改变全局样式,需要通过:global()来进行设置
因为我们设置的类名已经发生改变,所以我们在改变组件中的样式时要使用组件中提供的类名

如:

:global(.am-navbar-title){
color:#333;
}
.map{
    padding-top: 45px;
    height: 100%;
}
.container{
    height: 100%;
}

在全局样式前面可以加上属于哪个类名之下,这样可以提高权重,避免覆盖组件类名的样式

.map :global(.am-navbar){
    margin-top: -45px;
}

这里是我写的index.module.css文件
在页面中就变成这样的类名

上一篇 下一篇

猜你喜欢

热点阅读