How to disable primary color for FormLabel when radio button group is focused?

Question

When form control is focused then FormLabel is highlighted.How to disable primary color for FormLabel when radio button group is focused and use black instead?

const styles = {
  formLabel: {
    color: "#000"
  },
  formLabelFocused: {
    color: "#000"
  }
};

function App({ classes }) {
  return (
    <FormControl>
      <FormLabel
        classes={{ root: classes.formLabel, focused: classes.formLabelFocused }}
      >
        Options
      </FormLabel>
      <RadioGroup>
        {options.map(option => {
          const { value, label } = option;
          return (
            <FormControlLabel
              control={<Radio />}
              key={value}
              value={value}
              label={label}
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  );
}

example https://codesandbox.io/s/st-of-radio-31o2x

Answer 1

When an attempt to override Material-UI's default styles doesn't work, the next step is to look at how the default styles are defined.

Below is an excerpt from FormLabel.js showing how the focused styling is defined:

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    color: theme.palette.text.secondary,
    '&$focused': {
      color: theme.palette.primary.main,
    },
  },
  /* Pseudo-class applied to the root element if `focused={true}`. */
  focused: {},
});

The effect of this is for the focused color to be specified in a CSS rule like:

.MuiFormLabel-root.Mui-focused {
  color: #3f51b5;
}

The effect of your override attempt would be more like:

.Mui-focused {
  color: #000;
}

The default styling uses .Mui-focused along with .MuiFormLabel-root in order to ensure that the focused styling has higher CSS specificity than the non-focused styling. Your override, however, has lower specificity than the default focused styling.

Here is a modified version of your sandbox that works:

import React from "react";
import {
  FormControl,
  FormLabel,
  RadioGroup,
  Radio,
  FormControlLabel,
  withStyles
} from "@material-ui/core";

const options = [...Array(4).keys()].map(item => {
  return { value: `value ${item}`, label: `label ${item}` };
});

const styles = {
  formLabel: {
    color: "#000",
    "&.Mui-focused": {
      color: "#000"
    }
  }
};

function App({ classes }) {
  return (
    <FormControl>
      <FormLabel classes={{ root: classes.formLabel }}>Options</FormLabel>
      <RadioGroup>
        {options.map(option => {
          const { value, label } = option;
          return (
            <FormControlLabel
              control={<Radio />}
              key={value}
              value={value}
              label={label}
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  );
}

export default withStyles(styles)(App);

Related references:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• https://github.com/mui-org/material-ui/blob/v4.8.3/packages/material-ui/src/FormLabel/FormLabel.js#L17
• https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use--to-reference-selector-of-the-parent-rule