[英]How can I specify child styles with next.js?
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:其中Editor.module.css
是:
.quill {
height: 100%;
flex-grow: 1;
padding: 0;
position: relative;
}
.quill .ql-container {
position: absolute !important;
}
So the .quill
style gets properly applied.所以.quill
样式得到了正确应用。 But the child element .ql-container
does not.但是子元素.ql-container
没有。
What am I doing wrong?我究竟做错了什么?
You can't target sub-components in css modules via classnames.您不能通过类名定位 css 模块中的子组件。 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.以ql-container
div 为目标。
Alternatively, you can create a global style sheet to target .ql-container
.或者,您可以创建一个全局样式表来定位.ql-container
。
like @ juliomalves say in the comment, I tried and it works well:就像@juliomalves在评论中说的那样,我试过了,效果很好:
in xxx.module.css在 xxx.module.css
.card li:global(.list-indent-1) {
margin-left: 0em;
}
.card li:global(.list-indent-2) {
margin-left: 1em;
}
in jsx在 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>
Ran into this same situation and came up with the [class*=className]
solution.遇到同样的情况并想出了[class*=className]
解决方案。
In your case:在你的情况下:
.quill [class*=ql-container] {
position: absolute !important;
}
This will find children that have a partially matched class of ql-container.这将找到具有部分匹配的 ql-container 的 class 的孩子。
You could also use the [class$=className]
or [class^=className]
selectors to get the 'starts-with' and 'ends-with' matches.您还可以使用[class$=className]
或[class^=className]
选择器来获取“starts-with”和“ends-with”匹配项。 The 'ends-with' selector will not style child classes that have similar class names. 'ends-with' 选择器不会为具有相似 class 名称的子类设置样式。 Eg control-prev
and control-prev-icon
例如control-prev
和control-prev-icon
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.