如何为DevExtreme RadioGroup的选项文本设置不同颜色？

你可以通过两种简单方式实现需求：自定义选项模板或配置CSS类。

方法一：使用itemTemplate自定义渲染 #

DevExtreme的RadioGroup支持通过itemTemplate属性自定义每个选项的渲染逻辑，直接在模板中根据标签文本设置颜色：

import React from 'react';
import RadioGroup from 'devextreme-react/radio-group';

const MyComponent = () => {
  const items = [
    { id: 1, label: 'Accepted' },
    { id: 2, label: 'Rejected' },
  ];
  const defaultValue = items[1].id; 

  // 自定义选项渲染模板
  const renderRadioItem = (item) => {
    const textColor = item.label === 'Accepted' ? 'green' : 'red';
    return <span style={{ color: textColor }}>{item.label}</span>;
  };

  return (
    <RadioGroup
      items={items}
      displayExpr="label"
      valueExpr="id"
      defaultValue={defaultValue}
      onValueChanged={value => console.log('Selected value:', value)}
      itemTemplate={renderRadioItem} // 应用自定义模板
    />
  );
};

export default MyComponent;

方法二：通过CSS类配置样式 #

如果希望样式和逻辑分离，可以给每个选项添加cssClass属性，再通过CSS设置对应颜色：

1. 修改items数组，添加cssClass字段：

const items = [
  { id: 1, label: 'Accepted', cssClass: 'accepted-radio-label' },
  { id: 2, label: 'Rejected', cssClass: 'rejected-radio-label' },
];

2. 在全局CSS或组件样式文件中添加样式：

.accepted-radio-label {
  color: #2ecc71 !important; /* 绿色，!important用于覆盖组件默认样式 */
}

.rejected-radio-label {
  color: #e74c3c !important; /* 红色 */
}

3. 保持RadioGroup组件配置不变即可，组件会自动将cssClass应用到选项标签上。

两种方法都能实现需求，模板方式适合需要动态调整样式的场景，CSS类方式更便于统一管理样式。

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