如何使用 next.js 指定子 styles？

Question

我有：

import styles from './Editor.module.css'
...
      <ReactQuill
        theme="bubble"
        value={documentState.content}
        onChange={handleChange}
        modules={modules}
        formats={formats}
        onKeyDown={handleKeyDown}
        className={styles.quill}
      />

其中Editor.module.css是：

.quill {
  height: 100%;
  flex-grow: 1;
  padding: 0;
  position: relative;
}

.quill  .ql-container {
  position: absolute !important;
}

所以.quill样式得到了正确应用。 但是子元素.ql-container没有。

我究竟做错了什么？

Answer 1

您不能通过类名定位 css 模块中的子组件。 但是，您可以通过其他选择器来定位它们。

因此，您可以执行以下操作：

.quill > div:first-child {
  // styles
}

以ql-container div 为目标。

或者，您可以创建一个全局样式表来定位.ql-container 。

Answer 2

就像@juliomalves在评论中说的那样，我试过了，效果很好：

在 xxx.module.css

.card li:global(.list-indent-1) {
    margin-left: 0em;
}
.card li:global(.list-indent-2) {
    margin-left: 1em;
}

在 jsx

import styles from "./xxx.module.css"

<div class={styles.card}>
<ul>
<li class='list-indent-1'></li>
<li class='list-indent-2'></li>
</ul>
</div>

Answer 3

遇到同样的情况并想出了[class*=className]解决方案。

在你的情况下：

.quill [class*=ql-container] {
    position: absolute !important;
}

这将找到具有部分匹配的 ql-container 的 class 的孩子。

您还可以使用[class$=className]或[class^=className]选择器来获取“starts-with”和“ends-with”匹配项。 'ends-with' 选择器不会为具有相似 class 名称的子类设置样式。 例如control-prev和control-prev-icon