如何为Ant Design单选按钮组件传递嵌套内联动态样式？

我正尝试给默认的Ant Design Radio Button组件设置样式，样式是从JS变量动态获取的，所以必须用内联样式，但通过组件的style prop没法用嵌套选择器定位子组件。

效果对比 #

• 当前效果：单选按钮选中状态的内部圆圈还是默认样式，没有红色背景和边框
• 期望效果：单选按钮选中时，内部圆圈的背景色和边框色变成红色

需要实现的样式效果 #

我想实现类似下面CSS嵌套选择器的效果：

#ripeness .ant-radio-checked .ant-radio-inner {
    background-color: red;
    border-color: red;
}

对应的组件代码 #

组件结构大概是这样：

<Radio.Group id="ripeness" onChange={handleChange}>
  <Radio value="1">未成熟</Radio>
  <Radio value="2">成熟</Radio>
  <Radio value="3">过熟</Radio>
</Radio.Group>

解决方案 #

因为React内联样式本身不支持嵌套选择器，所以可以用以下几种方式实现动态样式：

1. 使用CSS-in-JS库（比如styled-components）

这种方式支持动态传参和嵌套选择器，很适合动态样式场景：

import styled from 'styled-components';
import { Radio } from 'antd';

// 自定义样式的RadioGroup
const StyledRadioGroup = styled(Radio.Group)`
  .ant-radio-checked .ant-radio-inner {
    background-color: ${props => props.customColor};
    border-color: ${props => props.customColor};
  }
`;

// 使用组件
const MyRadio = () => {
  // 从JS变量获取动态颜色
  const dynamicColor = 'red';

  return (
    <StyledRadioGroup 
      id="ripeness" 
      customColor={dynamicColor} 
      onChange={(e) => console.log(e.target.value)}
    >
      <Radio value="1">未成熟</Radio>
      <Radio value="2">成熟</Radio>
      <Radio value="3">过熟</Radio>
    </StyledRadioGroup>
  );
};

2. 动态创建样式表插入DOM

手动创建style标签，把动态样式插入到页面中，适合不想引入额外库的场景：

import { useEffect } from 'react';
import { Radio } from 'antd';

const MyRadio = () => {
  const dynamicColor = 'red';

  useEffect(() => {
    // 创建style标签
    const styleEl = document.createElement('style');
    styleEl.textContent = `
      #ripeness .ant-radio-checked .ant-radio-inner {
        background-color: ${dynamicColor};
        border-color: ${dynamicColor};
      }
    `;
    document.head.appendChild(styleEl);

    // 组件卸载时移除样式
    return () => {
      document.head.removeChild(styleEl);
    };
  }, [dynamicColor]);

  return (
    <Radio.Group 
      id="ripeness" 
      onChange={(e) => console.log(e.target.value)}
    >
      <Radio value="1">未成熟</Radio>
      <Radio value="2">成熟</Radio>
      <Radio value="3">过熟</Radio>
    </Radio.Group>
  );
};

3. 利用Ant Design的主题配置（全局动态样式）

如果是全局范围内的动态样式，可以通过ConfigProvider修改主题变量，这种方式能统一Ant Design组件的样式：

import { ConfigProvider, Radio } from 'antd';

const App = () => {
  const dynamicColor = 'red';

  const customTheme = {
    token: {
      colorPrimary: dynamicColor,
    },
  };

  return (
    <ConfigProvider theme={customTheme}>
      <Radio.Group 
        id="ripeness" 
        onChange={(e) => console.log(e.target.value)}
      >
        <Radio value="1">未成熟</Radio>
        <Radio value="2">成熟</Radio>
        <Radio value="3">过熟</Radio>
      </Radio.Group>
    </ConfigProvider>
  );
};

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