How can I specify child styles with next.js?

Question

I have:

import styles from './Editor.module.css'
...
      <ReactQuill
        theme="bubble"
        value={documentState.content}
        onChange={handleChange}
        modules={modules}
        formats={formats}
        onKeyDown={handleKeyDown}
        className={styles.quill}
      />

Where Editor.module.css is:

.quill {
  height: 100%;
  flex-grow: 1;
  padding: 0;
  position: relative;
}

.quill  .ql-container {
  position: absolute !important;
}

So the .quill style gets properly applied. But the child element .ql-container does not.

What am I doing wrong?

Answer 1

You can't target sub-components in css modules via classnames. You can, however, target them via other selectors.

So you could do something like:

.quill > div:first-child {
  // styles
}

to target the ql-container div.

Alternatively, you can create a global style sheet to target .ql-container .

Answer 2

like @ juliomalves say in the comment, I tried and it works well:

in xxx.module.css

.card li:global(.list-indent-1) {
    margin-left: 0em;
}
.card li:global(.list-indent-2) {
    margin-left: 1em;
}

in 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

Ran into this same situation and came up with the [class*=className] solution.

In your case:

.quill [class*=ql-container] {
    position: absolute !important;
}

This will find children that have a partially matched class of ql-container.

You could also use the [class$=className] or [class^=className] selectors to get the 'starts-with' and 'ends-with' matches. The 'ends-with' selector will not style child classes that have similar class names. Eg control-prev and control-prev-icon