javascript - 添加带有样式组件的事件类不起作用

Question

所以我的功能是:

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

Answer 1

您正在为 :active pseudo-class 提供样式，仅在元素被激活时使用(例如，在鼠标单击期间)。您可能想从 &:active 更改至&.active在您的样式化组件 CSS 中。

此外，您应该注意，您通常会根据带有样式组件的 Prop 更改样式。你可以做你正在做的事，但它不太常见。