How to avoid FormLabel components getting a blue color when selecting a radio button?

Question

I'm working on a Reactjs project which uses Material Ui components and I just need to create a form to create a new event. There I need to choose the event location type by using three options(In-Person, Hybrid and virtual). For this purpose I have used the radio buttons. When I select particular radio button all the FormLabel s get blue color. I don't need to make the form labels blue color when selecting the radio button. I have changed the focus styles applied also. But unfortunately, I was unable to remove the focus on FormLabel in blue color.

So here is my addEvent.js file:

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>
      <FormControl sx={{ display: "flex", width: "50%", paddingLeft: "250px" }}>
        <FormLabel align="left" sx={{ paddingBottom: "10px" }}>
          Event Name
        </FormLabel>
        <TextField size="small" 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}
          sx={{ paddingBottom: "20px" }}
        >
          <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>

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

You can see that I have changed the style in RadioGroup

sx={{
          "& .MuiRadio-root": {
            "&:focus": {
              outline: "none",
              color: "grey",
            },
          },
          "& .MuiSvgIcon-root": {
            color: "grey",
          },
        }}

But this doesn't resolved my problem.

Can someone please help me in this issue? Thank you in advance!

Answer 1

There are two ways you can control the FormLabel colour.

👇 Stop colour changing by keeping it in a default state (disabled):

 <FormControl>
    <FormLabel disabled={true}>
      My label
    </FormLabel>
    <RadioGroup ........ />
 </FormControl>

👇 Another option is to change the colour to whatever you want or match it with default (disabled) color using .Mui-focused class:

<FormControl>
    <FormLabel sx={{ "&.Mui-focused": { color: "red" } }}>
      My label
    </FormLabel>
    <RadioGroup ........ />
 </FormControl>

I hope it helps!