React Material UI withStyles 将参数传递给 withStyle 对象答案

【问题标题】：React Material UI withStyles pass parameters to withStyle objectReact Material UI withStyles 将参数传递给 withStyle 对象
【发布时间】：2022-01-12 08:49:05
【问题描述】：

我正在使用 mui withstyle 方法来设置单选按钮的样式。我想将颜色作为参数传递给要在样式对象中使用的 withstyle 方法，如下所示。有什么办法可以实现。

这是自定义组件。我想像这样传递颜色并在样式对象或类似的东西中使用它。

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

这就是我想在传递颜色时渲染组件的方式。

<CustomRadio color="red" />

提前致谢。

【问题讨论】：

标签： reactjs material-ui custom-component

【解决方案1】：

您的代码应如下所示试试这个解决方案

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}/>;
}

你可以这样称呼它：

<CustomRadio customColor="red" />

【讨论】：

我改了还是不行。
@Jesse 我修改了评论请尝试这个解决方案