javascript - 材质 UI 复选框 - 文本对齐
问题描述
我正在使用 Material UI 4.8.3 并具有以下内容:
const CustomizedCheckbox = withStyles({
root: {
color: '#0f236e',
'&$checked': {
color: '#0f236e',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
<Grid
item
xs={12}
sm={12}
md={12}
lg={12}
className="disclaimerAndNotes"
>
<FormControl fullWidth>
<FormControlLabel
control={<CustomizedCheckbox />}
label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>}
/>
</FormControl>
</Grid>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
我想要实现的是,复选框与文本的开头对齐。
如何做到这一点?
解决方案
您可以使用CSS
来实现这一点
<FormControl fullWidth>
<FormControlLabel
style={{display:'table'}}
control={<div style={{display:'table-cell'}}><CustomizedCheckbox/></div>}
label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>}
/>
</FormControl>
<CustomizedCheckbox>
在withdisplay:table-cell
道具周围添加一个包装器并添加display:table
到您的<FormControlLabel>
在这里你有一个工作的代码框
推荐阅读
- c++ - 为什么这段代码用 g++ 编译需要这么长时间?
- c# - 哪种技术用于与远程程序的零星连接
- javascript - Javascript 循环运行,通过地理位置设置网站语言
- powershell - PowerShell 在所有用户文件夹中搜索字符串,如果不存在则添加字符串
- audio - 音频分析和频率峰值
- python - 使用flask rest API将用户添加到Mysql数据库时如何获取JSON结果
- ios - 为什么我不能在我的 Objective-C 代码中使用我的 swift 文件?
- android - 为什么我的基础 Realm 实例上会出现 NPE?
- c++ - 如何从透明度计算不透明度?
- javascript - 获取 REST 请求的 XML 和实体