How can I use :hover within a React element, using styled-components?

Question

Tried searching for a solution but couldn't find anything that worked/that I understood.

I have an element that gets styled styled-components. The normal CSS rules for it works fine, but I was hoping to apply a hover effect to it. Unfortunately I'm not sure how to do it with the different syntax styled-components uses.

I have a ::hover:{...} rule but when I hover over the element, it doesn't change.

Here's the style-component css:

 //rules for a standard display (contains text that cant be directly edited)
export const EngravingDisplay = styled.p`
display: flex;
align-items: center;
justify-content: center;  

width: ${props => props.inputWidth || "30px"};
height: ${props => props.inputHeight || "30px"};

margin: ${props => props.inputMargin || "5px"};
padding: ${props => props.inputpadding || "5px"};

text-align: center;
font-family: calibri;
font-size: 17px;

background-color: ${props => props.inputBackground || "rgba(100,60,60,1)"};
color: white;

border-radius: ${props => props.inputBorderRadius || "0px"};

::hover: {
    background: rgb(255,255,0);
}
`;

Then, the React/JSX for the component:

<EngravingDisplay
  name="char"
  inputWidth="35px" 
  inputHeight="35px" 
  inputBorderRadius="100%" 
  inputMargin="-2px">                            
    {charInfo.charProficiency}
</EngravingDisplay>

And an image (this particular element is the greenish circle with the text on it):

shouldn't it be &: hover {...} styled-components.com/docs/… — Bms bharadwaj
– Bms bharadwaj, Commented Jan 11, 2022 at 16:25

score 3 · Accepted Answer · 2022-01-12 15:26:52Z

3

It is not so complicated. You just need to use my given syntax instead of the one you used:

&: hover {...}

edited Jan 12, 2022 at 15:26

answered Jan 11, 2022 at 16:39

user13514414

Sign up to request clarification or add additional context in comments.

1 Comment

user13514414 Over a year ago

@Community Don't try to be a coder please, it's a simple thing, and he got it. It's the help he needed, it's not a tutorial or documentation platform. When more explanation is needed, answer provider understands that and then provide more details regarding that matter.

Basil Nagle · Accepted Answer · 2022-01-11 16:33:19Z

0

I used the wrong selector

Bms bharadwaj pointed out I should have used: &: hover {...}

Not this: ::hover: {...}

answered Jan 11, 2022 at 16:33

Basil Nagle

511 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can I use :hover within a React element, using styled-components?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related