材质 UI - 缺少复选框标签答案

【问题标题】：Material UI - Checkbox Label is Missing材质 UI - 缺少复选框标签
【发布时间】：2018-08-01 07:50:40
【问题描述】：

我正在学习Material UI，我正在尝试显示一个带有标签的复选框。按照在线docs 中的示例，我正在渲染一个复选框，但没有标签。我做错了什么？

 return (
        <div className="entryForm" >
            <div style={{width:'100%'}}>
                <h3 style={ {display:'inline-block' } }>
                    User Details
                </h3>
                <span style={{float:'right'}}>
                    <Checkbox
                        label="Active"
                        labelPosition="left"
                    />
                </span>
            </div>...

【问题讨论】：

您拥有的代码对我有用（同时显示一个复选框和“活动”标签）。是否有其他代码可以帮助重现此问题？
附带说明，如果您刚开始使用material-ui，您应该use v1 instead of v0。
@JulesDupont...我想我正在使用 v1 - 汤姆的回答解决了我的问题。谢谢
哦，好吧 - 您链接到 v0 文档站点，所以我假设您使用的是 v0.0。供您将来参考，v1 文档站点位于 here。
@JulesDupont...所以，这是我的问题 - 旧文档！

标签： material-design material-ui

【解决方案1】：

我认为这取决于您使用的 MUI 版本。如果您使用的是 1.0 及更高版本，则应使用 FormControlLabel：

import {FormControlLabel} from 'material-ui/Form';

<FormControlLabel
control={
    <Checkbox
        name="SomeName"
        value="SomeValue"
    />
}
label="MyLabel"/>

文档中的更多内容： https://material-ui-next.com/demos/selection-controls/

【讨论】：

【解决方案2】：

FormControlLabel 将是可行的方法，这是更新后的导入 v4.11.1 的样子

import { FormControlLabel } from '@material-ui/core';

<FormControlLabel
control={
    <Checkbox
        name="SomeName"
        value="SomeValue"
    />
}
label="MyLabel"/>

【讨论】：