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

Question

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

我想要做的是 select 一些基于使用 css-模块生成的父 div class 的 Ant classes。

目前我有这个不对：

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

Answer 1

以下是正确的语法：

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

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

How to reference multiple selectors (mix of local and global) with js css-modules?

css

sass

css-selectors

css-modules