如何解决Material UI中选中单选按钮时FormLabel变蓝的问题？

问题根源 #

你把所有表单元素（文本输入框、单选按钮组）都包裹在同一个<FormControl>组件内，Material UI的FormControl会在内部任意控件获得焦点时，为所有属于它的FormLabel应用聚焦状态样式，导致所有标签同步变蓝。你之前修改Radio的focus样式无法解决问题，因为触发点是FormControl的全局状态联动，而非Radio本身的样式。

解决方案 #

以下是两种可行的解决方式：

方式1：拆分独立的FormControl（推荐）

将每个表单分组（Event Name、Event Type、Event Location Type）分别放在独立的FormControl中，让每个FormLabel只与自身组内的控件关联，避免跨组的状态影响。

修改后的完整代码：

import React from "react";
import {
  FormControl,
  FormLabel,
  MenuItem,
  TextField,
  Typography,
} from "@mui/material";
import { Link } from "react-router-dom";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Radio from "@mui/material/Radio";

export default function AddEvent() {
  const [selectedValue, setSelectedValue] = React.useState("");
  const [eventType, setEventType] = React.useState("");

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  const handleEventTypeChange = (event) => {
    setEventType(event.target.value);
  };
  
  return (
    <div>
      <Typography
        variant="h6"
        style={{ display: "flex", alignItems: "center", padding: "18px" }}
      >
        <Link to="/" style={{ textDecoration: "none", color: "grey" }}>
          Events
        </Link>
        <span style={{ marginLeft: "8px", marginRight: "8px" }}>{">"}</span>
        Create Event
      </Typography>
      <div style={{ width: "50%", paddingLeft: "250px" }}>
        {/* 独立的FormControl：Event Name */}
        <FormControl sx={{ paddingBottom: "20px" }}>
          <FormLabel align="left" sx={{ paddingBottom: "10px" }}>
            Event Name
          </FormLabel>
          <TextField size="small" />
        </FormControl>

        {/* 独立的FormControl：Event Type */}
        <FormControl sx={{ paddingBottom: "20px" }}>
          <FormLabel align="left" sx={{ paddingBottom: "10px" }}>
            Event Type
          </FormLabel>
          <TextField
            label="Select an option"
            outlined
            size="small"
            select
            value={selectedValue}
            onChange={handleChange}
          >
            <MenuItem value="Campaign">Campaign</MenuItem>
            <MenuItem value="Corporate">Corporate</MenuItem>
            <MenuItem value="Gala">Gala</MenuItem>
            <MenuItem value="Launch">Launch</MenuItem>
            <MenuItem value="Other">Other</MenuItem>
            <MenuItem value="Social">Social</MenuItem>
          </TextField>
        </FormControl>

        {/* 独立的FormControl：Event Location Type */}
        <FormControl>
          <FormLabel
            id="demo-radio-buttons-group-label"
            align="left"
            sx={{ paddingBottom: "10px" }}
          >
            Event Location Type
          </FormLabel>
          <RadioGroup
            aria-labelledby="demo-radio-buttons-group-label"
            defaultValue="In-Person"
            name="radio-buttons-group"
            value={eventType}
            onChange={handleEventTypeChange}
            sx={{
              "& .MuiRadio-root": {
                "&:focus": {
                  outline: "none",
                  color: "grey",
                },
              },
              "& .MuiSvgIcon-root": {
                color: "grey",
              },
            }}
          >
            <FormControlLabel value="In-Person" control={<Radio />} label="In-Person" />
            <FormControlLabel value="Virtual" control={<Radio />} label="Virtual" />
            <FormControlLabel value="Hybrid" control={<Radio />} label="Hybrid" />
          </RadioGroup>
        </FormControl>
      </div>
    </div>
  );
}

方式2：覆盖FormLabel的聚焦样式

如果不想拆分FormControl，可以直接给每个FormLabel添加样式，覆盖其聚焦状态下的颜色：

<FormLabel 
  align="left" 
  sx={{ 
    paddingBottom: "10px",
    "&.Mui-focused": {
      color: "inherit" // 使用默认文本颜色，或指定具体颜色如"grey"
    }
  }}
>
  Event Name
</FormLabel>

将上述样式应用到所有FormLabel上，即可阻止它们在任意控件聚焦时变蓝。

内容的提问来源于stack exchange，提问作者Vidushika Dasanayka