如何使用 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。