如何使用 js css-modules 引用多个选择器（本地和全局的混合）？

Posted 2023-03-06

【中文标题】如何使用 js css-modules 引用多个选择器（本地和全局的混合）？

【英文标题】：How to reference multiple selectors (mix of local and global) with js css-modules?

【发布时间】：2017-07-27 16:55:17

【问题描述】：

我想知道如何完成以下任务。我在我的 react 项目中使用 Ant Design 框架以及 css-modules 捆绑。

我要做的是根据使用 css-modules 生成的父 div 类选择一些 Ant 类。

目前我有这个不正确的：

.container
    flex-grow: 1 !important

.container
    \:global &.ant-layout-sider-collapsed
        .anticon
            font-size: 16px
            margin-left: 8px
        .nav-text
            display: none
        .ant-menu-submenu-vertical > .ant-menu-submenu-title:after
            display: none

这会产生以下内容：

.Navigation__container___1S9AX 
  flex-grow: 1 !important; 

.container.ant-layout-sider-collapsed .anticon 
  font-size: 16px;
  margin-left: 8px; 

.container.ant-layout-sider-collapsed .nav-text 
  display: none; 

.container.ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after 
  display: none; 

我想要得到的是：

.Navigation__container___1S9AX 
  flex-grow: 1 !important; 

.Navigation__container___1S9AX.ant-layout-sider-collapsed .anticon 
  font-size: 16px;
  margin-left: 8px; 

.Navigation__container___1S9AX.ant-layout-sider-collapsed .nav-text 
  display: none; 

.Navigation__container___1S9AX.ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after 
  display: none; 

感谢您的帮助，我尝试在谷歌上搜索有关其在 css-modules 中如何工作的更多信息，但找不到太多信息。

【参考方案1】：

下面是正确的语法：

.container 
    &:global(.ant-layout-sider-collapsed) 
         :global(.anticon) 
              //anticon css