Question

目前，对于1.0.0版之前的版本，Material-UI不允许在RadioButton和Checkbox控件标签上进行文本选择。

如何覆盖此行为？显然将labelStyle={{ userSelect: 'all' }}传递给组件无济于事。

我想要实现的是能够根据此屏幕截图突出显示选项标签中的文字：

Answer 1

您需要override the CSS class来阻止选择标签。

标签使用FormControlLabel类型的组件制作。在该组件的doc页面的底部，您可以看到CSS label类可以覆盖。

因此，您需要覆盖每个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" />

以下是一组可选单选按钮的完整代码（源自Radio buttons example in the docs：

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

以下是Checkbox按钮的完整代码（源自Checkboxes example in the doc）：

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

如何在RadioButton和CheckBox控件标签中覆盖user-select：none？

1 个答案: