已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問如何使用 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風格得到正確應用。但是子元素.ql-container沒有。我究竟做錯了什么？

查看完整描述

3 回答

猛跑小豬

TA貢獻1858條經驗獲得超8個贊

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

因此，您可以執行以下操作：

.quill > div:first-child {

// styles

}

ql-container以div為目標。

或者，您可以創建一個全局樣式表來定位.ql-container.

反對回復 2022-10-21

慕妹3146593

TA貢獻1820條經驗獲得超9個贊

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

在 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>

反對回復 2022-10-21

Smart貓小萌

TA貢獻1911條經驗獲得超7個贊

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

在你的情況下：

.quill [class*=ql-container] {

position: absolute !important;

}

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

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

反對回復 2022-10-21

3 回答
0 關注
150 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

3 回答

添加回答

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