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

Question

当表单控件获得焦点时，FormLabel 是 highlighted.How 以在单选按钮组获得焦点时禁用 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

您可以添加 !important.

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

Answer 2

当尝试覆盖 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);

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

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

javascript

reactjs

material-ui

jss