在 React 中悬停按钮时变暗

Posted 2023-03-15

【中文标题】在 React 中悬停按钮时变暗

【英文标题】：Darken When Hover For Button in 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);
  
`;

【参考方案1】：

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

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

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

【讨论】：

谢谢昆汀