CODEWITHSUNDEEP
reactjshoverstyled-components
marcinb1986
marcinb1986

Reputation: 902

Hover effect using Styled Components in in React don't work

Don't know why hover effect code on button in StyledComponents is not working, in React app. Can You please look at the code ? Thanks !

 export const StyledButton = styled.button`
  width: 12vh;
  background-color: ${colors.buttonColor};
  -webkit-box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
  box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
  height: 4vh;
  margin-top: 5vh;
  border-radius: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

  & :hover {
    background-color: hotpink;
  }
`;

    <StyledButton>
          <Link to="/main" style={{ textDecoration: "none" }}>
            <StyledParagraph>Go without</StyledParagraph>
          </Link>
        </StyledButton>

Upvotes: 0

Views: 552

Answers (1)

Ivan Popov
Ivan Popov

Reputation: 696

Do you need correct selector.

In styled components, if you are styling the component itself, you don't need to write "&:hover", you can write ":hover" instead.

Both selectors are correct, use either one. If I apply styles to the styled component itself, I usually don't write the "&" sign.

Instead

  & :hover {
    background-color: hotpink;
  }

Do you need write

  :hover {
    background-color: hotpink;
  }

Below code with correct selector for hover.

export const StyledButton = styled.button`
  width: 12vh;
  background-color: ${colors.buttonColor};
  box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
  height: 4vh;
  margin-top: 5vh;
  border-radius: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

  :hover {
    background-color: hotpink;
  }
`;

Upvotes: 1

Related Questions