CSS模块嵌套选择器

Question

我对app app和components的名称间距有以下约定：

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>

#app-name {

  .list {
    margin: 0;
  }

}

我想使用CSS模块，但是，我不确定如何转换它并保持应用程序和组件名称间距的相同特性。我知道我可以简单地省略整个#app-name ID，但我想要这种特殊性。

思想？

Answer 1

您需要同时引用 selectors 到导入的样式模块。

App.tsx

import style from './App.module.scss';
function App() {
  return (
    <div id={style['app-name']}>
      <ul className={style.list}>
        <li>item</li>
      </ul>
    </div>
  )
}

App.module.scss

#app-name {
  .list {
    margin: 0;
  }
}

这之前是 known issue，他们试图创建变通方法以实现所需的输出。幸运的是，这已经解决了。

Answer 2

试一下

#app-name .list {
    margin: 0;
  }

下面的代码段示例

＆＃13;

＆＃13;

 #app-name .list {
    margin: 0;
  }

＆＃13;

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>

＆＃13;

＆＃13;

＆＃13;