首頁猿問如何使用 next.js 指定子樣式？

如何使用 next.js 指定子樣式？

JavaScript

眼眸繁星 2022-10-21 17:36:21

我有：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風(fēng)格得到正確應(yīng)用。但是子元素.ql-container沒有。我究竟做錯(cuò)了什么？

查看完整描述

3 回答

猛跑小豬

TA貢獻(xiàn)1858條經(jīng)驗(yàn) 獲得超8個(gè)贊

您不能通過類名定位 css 模塊中的子組件。但是，您可以通過其他選擇器來定位它們。

因此，您可以執(zhí)行以下操作：

.quill > div:first-child {

// styles

}

ql-container以div為目標(biāo)。

或者，您可以創(chuàng)建一個(gè)全局樣式表來定位.ql-container.

反對(duì) 回復(fù) 2022-10-21

慕妹3146593

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超9個(gè)贊

就像@juliomalves在評(píng)論中說的那樣，我試過了，效果很好：

在 xxx.module.css

.card li:global(.list-indent-1) {

margin-left: 0em;

}

.card li:global(.list-indent-2) {

margin-left: 1em;

}

在 jsx 中

import styles from "./xxx.module.css"

<ul>

</ul>

</div>

反對(duì) 回復(fù) 2022-10-21

Smart貓小萌

TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個(gè)贊

遇到同樣的情況并想出了[class*=className]解決方案。

在你的情況下：

.quill [class*=ql-container] {

position: absolute !important;

}

這將找到具有部分匹配的 ql-container 類的孩子。

您還可以使用[class$=className]or[class^=className]選擇器來獲取“starts-with”和“ends-with”匹配項(xiàng)。'ends-with' 選擇器不會(huì)為具有相似類名的子類設(shè)置樣式。例如control-prev和control-prev-icon

反對(duì) 回復(fù) 2022-10-21