Comment référencer plusieurs sélecteurs (mélange de local et global) avec js-css-modules?

Question

Je voudrais savoir comment je pourrais accomplir ce qui suit. J'utilise le framework Ant Design dans mon projet de réaction avec le bundling de css-modules. Ce que je cherche à faire est de sélectionner des classes Ant basées sur une classe div divisée à l'aide de css-modules.

Actuellement, j'ai ce qui nest pas droite:

.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 

Ce produit les suivantes:

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

Ce que je cherche à obtenir est la suivante:

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

aide est appréciée , ive essayé googling pour plus d'informations sur la façon dont cela fonctionne dans css-modules, mais ne pouvait pas trouver beaucoup d'informations.

Answer 1

est inférieure à la syntaxe:

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