[英]Adding active class with styled component not working
所以我的功能是:
function onClickChange(props) {
let MyDiv = document.getElementById('myDIV')
let InterfaceDesign = document.getElementById('interfaceDesign')
if (MyDiv.style.display === 'none') {
MyDiv.style.display = ''
InterfaceDesign.classList.add('active')
} else {
MyDiv.style.display = 'none'
InterfaceDesign.classList.remove('active')
}
}
從DOM中的此函數,我可以看到它正在獲得活動類。 但是從我的樣式組件中:
const FirstDivElement = styled.div`
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
&:hover {
background-color: #e6007e;
transform: scale(1.05);
}
&:active{
background-color: #e6007e;
}
`
它沒有得到&:active的樣式
我的div元素是:
<div id="interfaceDesign">
<div onClick={onClickChange}>
<ListItems
headingText="Interface Design"
backgroundImage={props.secondBackgroundImage}
>
<Img
style={{
height: '50px',
width: '50px',
}}
sizes={props.interfacedesign}
/>
</ListItems>
</div>
</div>
<div id="myDIV" style={{ display: 'none' }}>
<InterfaceDesign
secondBackgroundImage={props.secondBackgroundImage}
interfacedesignMagenta={props.interfacedesignMagenta}
/>
</div>
</div>
誰能幫忙嗎? 預先謝謝你:D
您可以通過在FirstDivElement
傳遞active
的FirstDivElement
並更新onClick
方法來完成。
這是一個例子:
const FirstDivElement = styled.div`
position: relative;
overflow: hidden;
width: 100%;
background-color: ({ active }) => active ? #e6007e :#000;
&:hover {
background-color: #e6007e;
transform: scale(1.05);
}
&:active{
background-color: #e6007e;
}
`
onClickChange = () => {
let MyDiv = document.getElementById('myDIV')
this.setState({
active: MyDiv.style.display === 'none'
})
}
render(){
const { active } = this.state
return(
<div>
<div onClick={onClickChange}>
{/* content */}
</div>
<FirstDivElement active={active}>
{/* content */}
<div id="myDIV" style={{ display: 'none' }}/>
</FirstDivElement>
<button onClick={this.onClickChange}> Click </button>
</div>
)
}
您正在為:active偽類提供樣式,該樣式僅用於元素被激活時(例如,在單擊鼠標時)。 您可能希望在樣式化組件CSS &.active
&:active
更改為&.active
。
另外,您還應該注意,通常會使用帶有樣式化組件的道具來更改樣式。 您可以做自己在做的事情,但這並不常見。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.