作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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>
周围添加一个包装器与 display:table-cell
支持并添加 display:table
给您<FormControlLabel>
Here你有一个可用的codesandbox
关于javascript - Material UI 复选框 - 文本对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60614667/
我是一名优秀的程序员,十分优秀!