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

Question

我想知道如何才能做到以下几点。我在我的react项目中使用了Ant Design框架和css模块捆绑。

我要做的是选择一些基于父div类的Ant类，这些类是使用css-modules生成的。

目前我有一个不正确的方法：

.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-module中如何工作的信息，但是找不到太多的信息。

Answer 1

下面是正确的语法：

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