javascript - 如何使用 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为目标分区。
或者，您可以创建一个全局样式表来定位 .ql-container .