antd less中的:global

作者: jack钱 | 来源:发表于2022-02-22 14:21 被阅读0次

antd 项目,里面有 :global 写法
:global 其实是 css module 的一种写法,被其包围的类名不会被编译转换

less 文件:

.page{
  margin-bottom: 20px;

  :global {
    .name-group {
      margin-bottom: 10px;
    }
  }
}

tsx 文件:

import styles from './index.less'

<div className={styles.page}>
  <div className='name-group'>name</div>
</div>
  • page被编译了,绑定时需要通过styles.page形式绑定
  • name-group被 :global包裹,所以未被编译,可以直接使用'name-group'的形式绑定
  • 为了防止对其他页面造成影响,所以需要包裹额外的 className 限制样式的生效范围。

相关文章

网友评论

    本文标题:antd less中的:global

    本文链接:https://www.haomeiwen.com/subject/yajglrtx.html