如何引用多个选择与JS CSS模块（混合本地和全球）？

Question

我想知道如何完成以下工作。我使用蚂蚁设计框架，我用CSS模块捆绑在一起反应项目。

我所希望做的是选择基于使用CSS-模块产生一个父类的div这就是一些蚂蚁类。

目前，我有这个心不是哪个正确的：

.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; 

感谢帮助，我尝试在Google搜索中搜索有关如何在CSS模块中工作的更多信息，但找不到太多信息。

Answer 1

以下是正确的语法：

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