在 React 中悬停按钮时变暗

Question

我在将鼠标悬停在我的 React 应用程序中时使按钮变暗时遇到问题。问题是我使用 linear-gradient 作为背景颜色。如果我没有将背景声明为 linear-gradient

，则来自 polished (https://www.npmjs.com/package/polished) npm 包的 darken 可以工作

请在此处查看我的代码

const AddButton= styled.button`
  width: 100%;
  background: linear-gradient(
    ${(props) => props.theme.colors.secondary},
    ${(props) => props.theme.colors.primary}
  );
 :hover, :active {
    background-color: ${(props) =>  props.theme.colors && darken(0.1, props.theme.colors.primary)};
  }
`;

Answer 1

您正在加深一种颜色并将其设置为背景颜色，但它被您设置的背景图像覆盖了。

创建一张新的背景图片来替换已有的图片。

:hover, :active {
    background-image: linear-gradient(
        ${(props) => darken(0.1, props.theme.colors.secondary)},
        ${(props) => darken(0.1, props.theme.colors.primary)}
    );
}

在 React 中悬停按钮时变暗

Darken When Hover For Button in React

javascript

ecmascript-6

reactjs

styled-components

react-hooks