CSS 模块嵌套选择器

Question

我的应用程序和组件的名称间距有以下约定:

<div id="app-name">

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

</div>

#app-name {

  .list {
    margin: 0;
  }

}

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

想法？

Answer 1

您需要同时引用 selectors到导入的样式模 block 。
应用程序.tsx

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

应用模 block .scss

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

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