CSS 模块嵌套选择器

Question

我的应用程序和组件的名称间距遵循以下约定：

<div id="app-name">

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

</div>

---

#app-name {

  .list {
    margin: 0;
  }

}

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

想法？

Answer 1

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

应用程序.tsx

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

应用程序模块.scss

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

这是以前的一个已知问题，他们尝试创建解决方法以实现所需的输出。幸运的是，这个问题已经得到解决。