带样式组件的禁用按钮显示 hover state

Question

I'm creating a button using Styled Components, but even when is :disabled , it shows :hover behaviour which it should not. I'm wondering if there's a right way to disable hover if the button is already :disabled

this is the definition:

import styled from "styled-components";

const Button = styled.button`
background-color: #023047;
border: 1px solid #023047;
color: white;
padding: 4px 16px;
width:100%;
border-radius: 4px;
outline: 0;
text-transform: uppercase;
margin: 10px 0px;
cursor: pointer;
box-shadow: 0px 2px 2px #023047;
transition: ease background-color 250ms;
:disabled {
    cursor: default;
    opacity: 0.7;
}
:hover {
    background-color: #ffb703;
    box-shadow: 0px 2px 2px #ffb703;
}
:active {
    background-color: #023047;
    box-shadow: 2px 2px 0 #023047;
}
`;

const MyButton = ({ content, disabled = false}) => {
    return <Button disabled={disabled}>{content}</Button>;
}

this is how is being used:

<MyButton content="i am active" /> // shows active/hover correctly

<MyButton content="i am disabled" disabled={true}  /> // is disabled but changes color on hover

any suggestion to disable hover when the button is disabled?

Answer 1

try this:

 const Button = styled.button` background-color: #023047; border: 1px solid #023047; color: white; padding: 4px 16px; width: 100%; border-radius: 4px; outline: 0; text-transform: uppercase; margin: 10px 0px; cursor: pointer; box-shadow: 0px 2px 2px #023047; transition: ease background-color 250ms; :disabled { cursor: default; opacity: 0.7; } ${(props) =>.props:disabled && `:hover { background-color; #ffb703: box-shadow; 0px 2px 2px #ffb703: }`}:active { background-color; #023047: box-shadow; 2px 2px 0 #023047; } `;

Answer 2

you can target that with the selector

:hover:not([disabled])