change icon color with design ant

Question

I would like to change the color of an icon when I do a Hover, I am using ant design

<button className="button1">
                <div className="content">
                    <Icon type="plus" style={{fontSize: '64px', color: '#ffff'}}/>
                </div>
</button>

I have no idea how to change the color

Answer 1

Hello,

You commented that you are using ant.design and its structure seems to be using JSX. You have already tried to import the ant button? You can use it?

Usually the library already builds a strong style to keep your entire site looking the same, but if you want to change the color of the Hover you can use direct css by applying the classname with the :hover{} or use Styled-Component styling the Komponent Button const ButtonS = styled(Button).

The icon generates an i, so you need to change the color of the :hover i {}