is there any way to add color to these text for radiogroup

Question

I have this radioGroup from devextreme code blocks. I want to color the text which is displaying in the web page i,e. the accept should be green in color while red for reject.

code:

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; 
// Set the default selected value

  return (
    <RadioGroup
      items={items}
      displayExpr="label" // Define the property to display in the radio button label
      valueExpr="id" // Define the property to use as the value
      defaultValue={defaultValue}
      onValueChanged={value => console.log('Selected value:', value)}
    />
  );
};

export default MyComponent;

I try to render each component but failed to apply color

Answer 1

By using predefined method from devextreme itemComponent us can callout the props which you want to display. add color to it by using styletag.

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; 
// Set the default selected value

  return (
    <RadioGroup
      items={items}
      displayExpr="label" // Define the property to display in the radio button label
      valueExpr="id" // Define the property to use as the value
      defaultValue={defaultValue}
      onValueChanged={value => console.log('Selected value:', value)}
      itemComponent={({...restProps }) => (
         <div style={{color:restProps.data.id===1?'green':'red'}}>            {restProps.data.label}
         </div>
    )}
    />
  );
};

export default MyComponent;

Use State management if needed to apply state change