如何使用 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 {&nbsp; // styles}ql-container以div为目标。或者，您可以创建一个全局样式表来定位.ql-container.

Answer 2

就像@juliomalves在评论中说的那样，我试过了，效果很好：在 xxx.module.css.card li:global(.list-indent-1) {&nbsp; &nbsp; margin-left: 0em;}.card li:global(.list-indent-2) {&nbsp; &nbsp; 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] {&nbsp; &nbsp; position: absolute !important;}这将找到具有部分匹配的 ql-container 类的孩子。您还可以使用[class$=className]or[class^=className]选择器来获取“starts-with”和“ends-with”匹配项。'ends-with' 选择器不会为具有相似类名的子类设置样式。例如control-prev和control-prev-icon