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

以 div 为目标ql-container。

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