Reactjs 如何设计材质UI 1.x FormLabelControl'；s标签？

我试图在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;

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
const LabeledCheckbox=props=>{
const unstyled=props=>(
);
const Styled=with styles({
标签：props.labelStyle | |{}
})（无样式）；
返回（）；
};
导出默认标签复选框；

用途是：

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

然而，这感觉就像我真的在吃它。当然，有一种更简单的方法来设置

FontControlLabel

文本的样式。我觉得我没有正确的思维模式来理解材质UI样式是如何工作的

有人能告诉我该如何编写此代码吗？

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

//为复选框标签定义自定义默认样式（可选）
常量样式={
标签：{}
};
函数LabeledCheckbox（{label，class，…CheckboxProps}）{
返回(
);
}
导出默认样式（样式）（LabeledCheckbox）；

用法：

constyles=theme=>({
checkboxLabelA：{
体重：800，
},
checkboxLabelB：{
颜色：“蓝色”
}
});
类MyForm扩展了React.Component{
render（）{
const{classes}=this.props；
返回(
);
}
}
导出默认样式（样式）（MyForm）；

---

每次使用

LabeledCheckBox

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