React中如何获取父元素样式？实现文本随按钮背景色变色

方法一：CSS变量 + 对比度函数（纯CSS方案） #

利用Styled Components对CSS变量的支持，在父组件Button中定义背景色变量，子组件MyText读取该变量后，用CSS内置的contrast()函数自动生成高对比度文字色。

1. 修改Button的Styled组件，将背景色存入CSS变量：

const Button = styled.button`
  --button-bg: ${props => props.backgroundColor || '#007bff'};
  background-color: var(--button-bg);
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  // 其他Button样式
`;

2. 修改MyText的Styled组件，用父元素变量生成对比色：

const MyTextStyled = styled.span`
  // 自动生成对比色，可选设置最低对比度阈值（比如1.5）
  color: contrast(var(--button-bg) #000 #fff 1.5);
`;

const MyText = (props) => {
  return <MyTextStyled {...props} />;
};

注意：contrast()属于CSS Color Module Level 5特性，部分旧浏览器可能不支持，需确认目标环境兼容性。

方法二：JS计算对比度（兼容性更好） #

如果需要兼容更多浏览器，可通过JS获取父元素背景色，计算亮度后设置文字为黑/白高对比色。

1. 实现对比度计算工具函数：

// 将rgb/rgba字符串转成亮度值（基于YIQ色彩模型）
const getBrightness = (rgbStr) => {
  const rgbMatch = rgbStr.match(/\d+/g);
  if (!rgbMatch || rgbMatch.length < 3) return 0;
  const [r, g, b] = rgbMatch.map(Number);
  return (r * 299 + g * 587 + b * 114) / 1000;
};

// 根据亮度返回对比色：亮度>127.5用黑色，否则用白色
const getContrastColor = (bgColor) => {
  const brightness = getBrightness(bgColor);
  return brightness > 127.5 ? '#000' : '#fff';
};

2. 修改MyText组件，获取父元素背景色并设置文字色：

const MyText = (props) => {
  const ref = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (!ref.current || !ref.current.parentElement) return;
    
    const parentEl = ref.current.parentElement;
    // 获取父元素计算后的背景色
    const parentBg = window.getComputedStyle(parentEl).getPropertyValue('background-color');
    ref.current.style.color = getContrastColor(parentBg);

    // 可选：监听父元素样式变化（应对背景色动态更新的场景）
    const observer = new MutationObserver(() => {
      const updatedBg = window.getComputedStyle(parentEl).getPropertyValue('background-color');
      ref.current.style.color = getContrastColor(updatedBg);
    });
    observer.observe(parentEl, { attributes: true, attributeFilter: ['style'] });

    return () => observer.disconnect();
  }, []);

  return <MyTextStyled ref={ref} {...props} />;
};

方法三：props传递背景色（最直接可控） #

如果Button的背景色是通过props传入的已知值，可直接把该值传递给MyText，再计算文字色：

1. 修改MyPage和Button组件：

const MyPage = () => {
  const buttonBg = '#28a745'; // 可动态生成或静态定义
  return (
    <Button backgroundColor={buttonBg}>
      <MyText parentBg={buttonBg}>Button 1</MyText>
    </Button>
  );
};

const Button = styled.button`
  background-color: ${props => props.backgroundColor || '#007bff'};
  // 其他样式
`;

2. 修改MyText组件：

const MyText = ({ parentBg, ...props }) => {
  const textColor = getContrastColor(parentBg); // 复用之前的getContrastColor函数

  return <MyTextStyled style={{ color: textColor }} {...props} />;
};

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