CSS 模块直系后代

Question

我正在尝试在 React 应用程序中使用 CSS 模块，但我想以直系后代为目标。具体来说，我想创建一个“条纹列表”。我使用的 CSS 看起来像

.striped-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 200px;
}
.striped-list > li {
  border-bottom: 1px solid rgb(221, 221, 221);
  padding: 6px;
}
.striped-list > li:nth-of-type(odd) {
  background-color: #e9e9f9;
}
.striped-list > li:last-child {
  border-bottom: none;
}
.striped-list > li:hover {
  background-color: yellowgreen;
}

我可以将此样式表与类似的东西一起使用

import 'StripedList.css';

但我想使用 CSS 模块，这样我就可以避免使用全局 CSS。所以我想要类似的东西

import styles from './StripedList.css';

然后我可以使用类似的样式

<ul className={styles.stripedList}>

但这不起作用。我认为这是因为 CSS 使用“>”指定了直接后代，我不确定在使用 CSS 模块时它是如何翻译的。或者也许有更好的方法来获得这种外观？

Answer 1

如果你使用 webpack，那么你必须启用模块：

{
  loader: 'css-loader',
  options: { 
    modules: true
  }
}