css - 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>
  )
}

App.module.scss

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

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

Answer 2

我不确定它是否适用于所有实现，但在 Next.js 中，您可以在 css 选择器前面加上前缀，:global以允许它以标准类名为目标：

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

感谢 GitHub 上的 ctsstc 发现这一点。

Answer 3

尝试这个

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

下面的片段示例

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

<div id="app-name">

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

</div>