React中使用linear-gradient背景的按钮hover时如何实现变暗效果

问题根因 #

• 你设置的linear-gradient属于CSS background-image属性范畴，渲染优先级远高于background-color，所以hover时修改background-color会被原有渐变完全覆盖，无法显示效果
• polished的darken方法仅支持处理纯色值，不能直接传入整段渐变字符串做整体变暗处理

方案1：重新生成变暗后的渐变（效果最精准） #

直接对渐变的两个色值分别做变暗处理，hover时替换整个渐变背景：

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

该方案严格符合darken的颜色计算规则，适合需要严格匹配设计规范的场景。

方案2：半透明遮罩实现（通用性最强） #

不需要修改原有渐变，通过叠加半透明黑色层模拟变暗效果，适配所有背景类型（渐变、图片、复杂背景都可使用）：

const AddButton= styled.button`
  width: 100%;
  background: linear-gradient(
    ${(props) => props.theme.colors.secondary},
    ${(props) => props.theme.colors.primary}
  );
  border: none;
  position: relative;
  overflow: hidden;
  /* 保证按钮文字在遮罩上层 */
  > * {
    position: relative;
    z-index: 2;
  }
  /*  hover变暗遮罩 */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
  }
  :hover::after, :active::after {
    opacity: 0.1;
  }
`;

该方案不需要做颜色计算，代码更简洁，性能表现更好。

内容的提问来源于stack exchange，提问作者Joseph