React styled-components hover时props传入背景色变暗效果不生效

你的hover样式不生效核心是两个问题：

• 颜色值计算逻辑完全错误：CSS颜色值不管是关键字（如blue）、十六进制值（如#123456）还是rgb/rgba字符串，本质都是字符串类型，直接在JS里执行字符串 * 0.5会得到NaN，最终编译出来的CSS会是background-color: NaN;，属于无效样式，浏览器会直接丢弃这条规则，自然看不到效果。而你写固定颜色值blue时是合法CSS值，所以能正常生效。
• 缺省值逻辑遗漏：hover状态的颜色计算没有复用默认值逻辑，当外部没有传入fillColor prop时，这里拿不到默认的blue值做计算，就算修正了运算逻辑也会出现没传prop时hover失效的问题。

你可以根据实际场景二选一：

方案1：CSS filter实现（零依赖、代码最少） #

直接用CSS原生的亮度滤镜实现变暗效果，不需要做任何颜色值格式转换，所有合法CSS颜色都能适配：

const ColorBlock = styled.div`
  background-color: ${props => props.fillColor || "blue"};
  flex-grow: 1;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 5px solid black;
  transition: filter 0.2s ease;

  &:hover {
    /* brightness取值范围0~1，值越小颜色越暗，0.5即亮度降为原有的50% */
    filter: brightness(0.5);
  }
`;

注意：filter效果会作用于元素内所有子元素（比如内部的文字、图片都会同步变暗），如果不希望子元素样式被影响，选择下面的方案。

方案2：颜色函数计算变暗值（不影响子元素） #

使用颜色处理工具直接计算出变暗后的背景色值，只会修改背景属性，不会干扰子元素样式，推荐用和styled-components适配性较好的polished库的darken方法实现：

import { darken } from 'polished';

const ColorBlock = styled.div`
  background-color: ${props => props.fillColor || "blue"};
  flex-grow: 1;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 5px solid black;
  transition: background-color 0.2s ease;

  &:hover {
    // 第一个参数为变暗比例，第二个参数传入待处理的色值，记得补全默认值逻辑
    background-color: ${props => darken(0.5, props.fillColor || "blue")};
  }
`;

这个方案兼容所有合法CSS颜色格式，计算结果是标准的颜色字符串，不会出现样式无效的问题。

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