如何使用 next.js 指定子样式？

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$=className]or[class^=className]选择器来获取“starts-with”和“ends-with”匹配项。'ends-with' 选择器不会为具有相似类名的子类设置样式。例如control-prev和control-prev-icon