首先，我正在使用react-swipe-to-delete-component，但我覺得這對問題應該沒有什么影響。
我正在嘗試更改background-color“內置”元素的屬性。當插件使用它時，我無法控制類名，并且我無法為它（我認為）分配一個單獨的類名。有沒有辦法僅僅基于選擇器來改變元素的樣式，就像在原生 JavaScript 中一樣？
我有這個元素<SwipeToDelete>。它構建了一個我需要通過選擇器訪問的 div：
<div class="swipe-to-delete">
<div class="js-delete">
因此我需要能夠訪問
.swipe-to-delete .js-delete
作為選擇器。
有沒有類似 JS IE 的方法document.getElementsByClassName('.swipe-to-delete .js-delete')[0].style.background-color = "#FFF")
我需要根據呼叫的函式更改背景顏色：
const [isRight, setRight] = useState(false);
const [isLeft, setLeft] = useState(false);
const onLeft = (...args) => {
// Make Mask Red with Icon
console.log('Set left to true');
setLeft(true);
}
const onRight = (...args) => {
// Make Mask Green with icon
console.log('Set right to true');
setRight(true);
}
<SwipeToDelete
onLeft={onLeft}
onRight={onRight}
>
這行得通..我只是不知道如何合并這個偽陳述句
isRight ? '.swipe-to-delete .js-delete'.backgroundColor="green" : ''
由于我無法訪問<SwipeToDelete>的內部作業以在某處設定類名，而無需修改節點模塊代碼。我真的被困在這里了。
我只想簡單地.swipe-to-delete .js-delete根據左右功能更改背景顏色。我看錯了嗎？
uj5u.com熱心網友回復：
有一個classNameTag道具可以用來在<SwipeToDelete>（帶有 的元素className="swipe-to-delete"）的包裝元素上定義一個類名。
根據滑動方向，您className相應地設定：
<SwipeToDelete
classNameTag={isRight ? "is-right" : isLeft ? "is-left" : ""}
onLeft={onLeft}
onRight={onRight}
>
并使用 CSS 進行樣式設定：
.swipe-to-delete.is-right .js-delete {
background-color: green;
}
.swipe-to-delete.is-left .js-delete {
background-color: red;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/523013.html
上一篇：如何讓我的頁面覆寫整個寬度
下一篇：熱門制作漸變半紅/半藍？