如果在 Material UI 中选择了 FormControlLabel，如何设置它的背景颜色？

Question

如果我有一个

RadioGroup

并且想要将选中的单选按钮的背景颜色设置为另一种颜色，我该如何在 Material UI 中执行此操作？在文档中找不到任何内容。

<FormControlLabel
  key={key}
  value={value}
  control={<Radio />}
  label={label}
/>

如果我尝试下面的代码，只有单选按钮本身的背景颜色为黑色，而不是整个标签。

<FormControlLabel
      key={obj.value}
      value={obj.value}
      control={
        <Radio
          sx={{
            '&.Mui-checked': {
              backgroundColor: 'black',
            },
          }}
        />
      }
      label={obj.label}
    />

Answer 1

实际上，我在文档中找到了一些有用的信息。

通过使用 useRadioGroup() 钩子，我们可以更好地控制单选组的外观。

受到文档中示例的启发，我找到了您问题的解决方案。

现场演示：

代码：

import * as React from "react";
import RadioGroup, { useRadioGroup } from "@mui/material/RadioGroup";
import FormControlLabel, {
  FormControlLabelProps
} from "@mui/material/FormControlLabel";
import Radio from "@mui/material/Radio";

function MyFormControlLabel(props: FormControlLabelProps) {
  const radioGroup = useRadioGroup();

  let checked = false;

  if (radioGroup) {
    checked = radioGroup.value === props.value;
  }

  if (checked)
    return (
      <FormControlLabel
        sx={{
          backgroundColor: (theme) => theme.palette.primary.light
        }}
        checked={checked}
        {...props}
      />
    );

  return <FormControlLabel checked={checked} {...props} />;
}

export default function UseRadioGroup() {
  return (
    <RadioGroup name="use-radio-group" defaultValue="first">
      <MyFormControlLabel value="first" label="First" control={<Radio />} />
      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
    </RadioGroup>
  );
}

Answer 2

通过 Mui 示例文档和之前的答案进行一些调整，您可以通过更改您要引用的类来更改所选单选按钮的背景。

在 Mui Docs 示例中，他们通过引用 ".MuiFormControlLabel-label" 来更改文本的颜色

const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
  ({ theme, checked }) => ({
    '.MuiFormControlLabel-label': checked && {
      color: theme.palette.primary.main,
    },
  }),
); 

使用 "&.MuiFormControlLabel-root" 来访问背景和文本。

const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
  ({ theme, checked }) => ({
    '&.MuiFormControlLabel-root': checked && {

      //changing text color
      color: theme.palette.primary.main,

      //changing background color and shape
      backgroundColor: "#d3d3d3",
      borderRadius: "15px",
    },
  })
);

全面实施：

import * as React from "react";
import { styled } from "@mui/material/styles";
import RadioGroup, { useRadioGroup } from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Radio from "@mui/material/Radio";

constStyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
  ({ theme, checked }) => ({
    '&.MuiFormControlLabel-root': checked && {

      //changing text color
      color: theme.palette.primary.main,

      //changing background color and shape
      backgroundColor: "#d3d3d3",
      borderRadius: "15px",
    },
  })
);

function MyFormControlLabel(props) {
  const radioGroup = useRadioGroup();

  let checked = false;

  if (radioGroup) {
    checked = radioGroup.value === props.value;
  }

  return <StyledFormControlLabel checked={checked} {...props} />;
}

export default function UseRadioGroup() {
  return (
    <RadioGroup name="use-radio-group" defaultValue="first">
      <MyFormControlLabel value="first" label="First" control={<Radio />} />
      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
    </RadioGroup>
  );
}

如果您在移动到另一个页面后保留

RadioGroup

的状态（例如用例：用户想要在多页面表单上回溯）。然后，此解决方案将在渲染时将您的自定义样式绑定到您的

RadioGroup

状态。