Adding active class with styled component not working

Question

So My function is:

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')
  }
}

From this function in DOM I can see that it's getting the active class. But from my styled component:

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;
  }
`

It is not getting the style of &:active

My div element is:

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

Can anyone please help? Thank you in advance :D

Answer 1

You can do by passing a prop active in your FirstDivElement and update your onClick method.

here an example :

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> 
    )
} 

Answer 2

You're providing styles for the :active pseudo-class , which is only used for when an element is being activated (eg during a mouse click). You probably want to change from &:active to &.active in your styled component CSS.

Also, you should note that you usually would alter styles based on props with Styled Components. You can do what you're doing, but it's less common.