js css-modulesで複数のセレクタ（ローカルとグローバルの混合）を参照するには？

Question

私は以下をどのように達成できるか知りたいと思います。私は反作用プロジェクトでAnt Design FrameworkをCSSモジュールバンドルとともに使用しています。

私が探しているのは、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; 

ヘルプが理解されます、iveはCSSのモジュールでこれがどのように機能するかについての詳しい情報を求めてグーグルで試したが、多くの情報を見つけることができなかった。以下は

Answer 1

は、適切な構文です：

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