css modules的用法和在react项目中的应用

12 篇文章 0 订阅

参考文章

CSS Modules 的用法

CSS Modules 的功能很单纯,只加入了局部作用域和模块依赖,可以保证某个组件的样式,不会影响到其他组件。

局部作用域

CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。

产生局部作用域的唯一方法,就是使用一个唯一的 class 的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。

示例代码:

// index.tsx
import React from 'react';
import styles from './index.less'

const  Create: React.FC = () => {
  return <>
    <div className={styles.titleName)></div>
  </>
}

上面代码中,将样式文件 index.less 输入到 style 对象,然后引用 style.titleName 代表一个 class

.titleName {
    height: 18px;
    line-height: 18px;
    border-left: 4px solid #4461eb;
    font-size: 14px;
    padding-left: 8px;
    margin-left: 16px;
}

构建工具会将类名 style.titleName 编译成一个哈希字符串。

<div class="titleName___ua3pe">
    标题
</div>

index.less 也会同时被编译。

.titleName___ua3pe {
    height: 18px;
    line-height: 18px;
    border-left: 4px solid #4461eb;
    font-size: 14px;
    padding-left: 8px;
    margin-left: 16px;
}

这样一来,这个类名就变成唯一的了,只对 Create 组件有效。

CSS Modules 提供各种插件,支持不同的构建工具。上面使用的是 Webpack 的css-loader插件,因为它对 CSS Modules 的支持最好,而且很容易使用。

下面是这个示例的 webpack.config.js

module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

上面代码中,关键的一行是style-loader!css-loader?modules,它在css-loader后面加了一个查询参数modules,表示打开 CSS Modules 功能。

全局作用域

CSS Modules 允许使用:global(.className)的语法,声明一个全局规则。凡是这样声明的class,都不会被编译成哈希字符串。

使用 css modules 的方式引入的 less 文件,如果需要复写 antd 组件样式,需要加上全局标识:

:global {
    .ant-upload-select {
        margin-left: -12px;
    }
    .ant-upload-list {
        position: absolute;
        width: 80%;
        left: 24px;
        top: 0px
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值