React Material UI withStyles pass parameters to withStyle object

user_14508466 0
Viewed 631

I am using mui withstyle method to style a radio button. I want to pass a color as a parameter to the withstyle method to be used in the style object as I have shown below. Is there any way I can achieve that.

This is the custom component. I want to pass the color like this and use it in the style object or something similar to that.

export const CustomRadio = withStyles((theme, customColor) => ({
root: {
  "& svg": {
    width: "22px",
    height: "22px",
  },
  "&$checked": {
    color: customColor,
  },
  "&:hover": {
    backgroundColor: "transparent",
  },
},
checked: {},
}))((props) => <Radio {...props} />);

This is how I wanna render the component while passing the color.

<CustomRadio color="red" />

Thanks in advance.

custom-component material-ui reactjs
1 Answers

Your code should look like that Try this solution

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  root: {
    "& svg": {
      width: "22px",
      height: "22px",
    },
    "&$checked": {
      color: props => props.customColor,
    },
    "&:hover": {
      backgroundColor: "transparent",
    },
  },
  checked: {},
});

export default function CustomRadio (props) {
  const classes = useStyles({
    color: props.customColor,
  });
  return <Radio  className={classes.root}/>;
}

to call it you can do:

<CustomRadio customColor="red" />
user_92515420
Related