Material ui 如何覆盖RadioButton和CheckBox控件标签中的用户选择：无？

目前，对于1.0.0之前的版本，材质UI不允许在RadioButton和Checkbox控件标签上选择文本

我如何覆盖此行为？显然，将

labelStyle={{userSelect:'all'}}

传递到组件没有帮助

我试图实现的是能够根据以下屏幕截图突出显示选项标签中的文本：

您需要避免选择标签

标签由类型为的组件制成。在该组件的文档页面底部，您可以看到CSS

label

类可以覆盖

因此，您需要覆盖每个

FormControlLabel

上的

标签

类，如下所示：

// Define the overriding style
const styles = () => ({
  selectableLabel: {
    userSelect: 'all',
  },
});

// Override the label CSS that prevents selection
<FormControlLabel classes={{ label: classes.selectableLabel }} value="male" control={<Radio />} label="Male" />

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Radio, { RadioGroup } from 'material-ui/Radio';
import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form';

const styles = theme => ({
  root: {
    display: 'flex',
  },
  formControl: {
    margin: theme.spacing.unit * 3,
  },
  group: {
    margin: `${theme.spacing.unit}px 0`,
  },
  selectableLabel: {
    userSelect: 'all',
  },
});

class RadioButtonsGroup extends React.Component {
  state = {
    value: '',
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <FormControl component="fieldset" required className={classes.formControl}>
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender1"
            className={classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <FormControlLabel classes={{ label: classes.selectableLabel }} value="male" control={<Radio />} label="Male" />
            <FormControlLabel classes={{ label: classes.selectableLabel }} value="female" control={<Radio />} label="Female" />
            <FormControlLabel classes={{ label: classes.selectableLabel }} value="other" control={<Radio />} label="Other" />
            <FormControlLabel classes={{ label: classes.selectableLabel }} value="disabled" disabled control={<Radio />} label="Disabled" />
          </RadioGroup>
        </FormControl>
      </div>
    );
  }
}

RadioButtonsGroup.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RadioButtonsGroup);

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import { FormControl, FormGroup, FormControlLabel } from 'material-ui/Form';
import Checkbox from 'material-ui/Checkbox';

const styles = {
  selectableLabel: {
    userSelect: 'all',
  },
};

class CheckboxesGroup extends React.Component {
  state = {
    gilad: true,
    jason: false,
    antoine: true,
  };

  handleChange = name => (event, checked) => {
    this.setState({ [name]: checked });
  };

  render() {
    const { classes } = this.props;

    return (
      <FormControl component="fieldset">
        <FormGroup>
          <FormControlLabel
            classes={{ label: classes.selectableLabel }}
            control={
              <Checkbox
                checked={this.state.gilad}
                onChange={this.handleChange('gilad')}
                value="gilad"
              />
            }
            label="Gilad Gray"
          />
          <FormControlLabel
            classes={{ label: classes.selectableLabel }}
            control={
              <Checkbox
                checked={this.state.jason}
                onChange={this.handleChange('jason')}
                value="jason"
              />
            }
            label="Jason Killian"
          />
        </FormGroup>
      </FormControl>
    );
  }
}

CheckboxesGroup.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CheckboxesGroup);