在 React 中悬停按钮时变暗答案

【问题标题】：Darken When Hover For Button in React在 React 中悬停按钮时变暗
【发布时间】：2021-09-28 00:33:17
【问题描述】：

在我的 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)};
  }
`;

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-hooks styled-components

【解决方案1】：

您将颜色变暗并将其设置为背景颜色，但它被您设置的背景图像所覆盖。

创建一个新的背景图片来替换你的背景图片。

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

【讨论】：

谢谢昆汀