Custom Radio button Using react component and Material UI

Here is an example of how you can do this:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Radio from '@material-ui/core/Radio';

const useStyles = makeStyles({
  root: {
    // Customize the styling of the root element
  },
  checked: {
    // Customize the styling of the checked state
  },
});

const CustomRadio = (props) => {
  const classes = useStyles();

  return (
    <Radio
      className={classes.root}
      checkedClassName={classes.checked}
      // Other props here
      {...props}
    />
  );
};

In this example, the CustomRadio component is using the makeStyles hook from Material-UI to create a custom styles object. The styles object contains two entries: root and checked. These styles are applied to the root element and the checked state of the Radio component, respectively.

You can customize the styles of the Radio component by modifying the styles in the useStyles hook. For example, you could change the colors of the Radio component using the color property in the root and checked styles:

const useStyles = makeStyles({
  root: {
    color: '#f00', // Red color
  },
  checked: {
    color: '#0f0', // Green color
  },
});

In addition to styling the Radio component, you can also customize its behavior by passing props to it. For example, you could add an onChange prop to handle changes to the Radio component's value:

const handleChange = (event) => {
  // Handle the change event here
};

const CustomRadio = (props) => {
  // The rest of the component code here

  return (
    <Radio
      onChange={handleChange}
      // Other props here
      {...props}
    />
  );
};

In the end, remember there is always a different way to build any code or components. I hope this helps you to create a simple React component using Radio MUI