cssreactjsdevextremedevextreme-react

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


sample picture

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


Solution

  • 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