如何为 Material UI 1.x FormLabelControl 的标签设置样式？答案

【问题标题】：How do I style a Material UI 1.x FormLabelControl's label?如何为 Material UI 1.x FormLabelControl 的标签设置样式？
【发布时间】：2019-01-05 06:40:08
【问题描述】：

我正在尝试在 Material UI (1.4.1) 中创建一个带标签的复选框控件，我可以在其中设置标签文本的样式（大小、颜色、重量等）。

这就是我想出的——可行的方法

import React from 'react';
import {withStyles} from '@material-ui/core/styles';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';

const LabeledCheckbox = props => {
    const unstyled = props => (
        <FormControlLabel
            control={
                <Checkbox/>
            }
            label={props.label}
            classes={{
                label: props.classes.label
            }}
        />
    );

    const Styled = withStyles({
        label: props.labelStyle || {}
    })(unstyled);

    return (<Styled label={props.label}/>);
};

export default LabeledCheckbox;

用法是：

<LabeledCheckbox label='So is this' labelStyle={{ fontWeight: 'bold' }}/>

但是，这感觉就像我真的在做一顿饭。当然有更简单的方法来设置FontControlLabel 文本的样式。我觉得我对 Material UI 样式的工作原理没有正确的心理模型。

谁能告诉我这段代码应该怎么写？

【问题讨论】：

是否需要每次使用LabeledCheckBox组件时都能够注入不同的样式？
是的。这是一个关键要求。我最初的代码是静态的，很简单。
澄清一下，您需要基于道具生成的完全动态的样式吗？还是只是在每次使用组件时注入不同的自定义样式？
如果我的回答没有解决您的用例，即如果您需要基于道具的动态样式，请告诉我，我会更改它。
嗨，卢克。谢谢你。我的用例确实需要基于道具的动态样式。所以，如果你有一个比我更干净的解决方案，我会很乐意看到它。不过，下面的答案很有趣。

标签： reactjs checkbox themes material-ui styling

【解决方案1】：

您可以在每次使用组件时使用classes API 注入自定义样式。

// Define custom default styles for checkbox label (optional)
const styles = {
  label: {}
};

function LabeledCheckbox({ label, classes, ...CheckboxProps }) {
  return (
    <FormControlLabel
      label={label}
      classes={classes}
      control={<Checkbox {...CheckboxProps} />}
    />
  );
}

export default withStyles(styles)(LabeledCheckbox);

用法：

const styles = theme => ({
  checkboxLabelA: {
    fontWeight: 800,
  },
  checkboxLabelB: {
    color: 'blue'
  }
});

class MyForm extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <FormGroup>
        <LabeledCheckBox
          label="Checkbox A"
          classes={{ label: classes.checkboxLabelA }}
        />
        <LabeledCheckBox
          label="Checkbox B"
          classes={{ label: classes.checkboxLabelB }}
        />
      </FormGroup>
    );
  }
}

export default withStyles(styles)(MyForm);

Live example on CodeSandbox

【讨论】：