javascript - 单选按钮组聚焦时如何禁用 FormLabel 的原色？

Question

当表单控件获得焦点时，FormLabel 将突出显示。如何在单选按钮组获得焦点时禁用 FormLabel 的原色并改用黑色？

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

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

Answer 1

当尝试覆盖 Material-UI 的默认样式不起作用时，下一步是查看默认样式的定义方式。

以下是 FormLabel.js 的摘录显示焦点样式是如何定义的:

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: {},
});

这样做的效果是在 CSS 规则中指定焦点颜色，例如:

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

您的覆盖尝试的效果更像是:

.Mui-focused {
  color: #000;
}

默认样式使用 .Mui-focused 和 .MuiFormLabel-root 以确保焦点样式具有更高的 CSS specificity比非重点造型。但是，您的覆盖比默认的重点样式具有更低的特异性。

这是您的沙箱的修改版本:

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

相关引用:

• 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