material-ui 表单标签位置答案

【问题标题】：material-ui form label positionsmaterial-ui 表单标签位置
【发布时间】：2021-03-11 08:54:19
【问题描述】：

使用Material-ui + react 创建一个表单。有没有办法将标签布局到输入字段的一侧？它更具可读性。

像这样：

name   [input]
title  [input]

而不是

name  
[input]
title 
[input]

我只能找到标签和输入区域混合在一起的字段。我可以构建自己的组件或网格，但似乎这是一个应该存在的明显布局。

文档页面 https://material-ui.com/components/text-fields/

【问题讨论】：

使用这个link
如果你看上面我已经从那个页面添加了一个截图......>。
不是上图。此链接包含Kg。您可以替换输入名称。
该链接上的所有表单都是垂直堆叠的，与我上面的不良示例相同。似乎表单控制标签可能是这种方式。 material-ui.com/api/form-control-label 演示在这里更好 material-ui.com/components/checkboxes 但现在不确定如何将这些复杂的组件传递到 react-hook-form 中。

标签： css reactjs forms material-ui formik-material-ui

【解决方案1】：

我遇到了同样的问题，我发现解决问题的唯一方法是使用“sx”，它允许您覆盖 CSS。

<InputLabel htmlFor="login" sx={{display: 'inline'}}>Login :</InputLabel>
<Input  id="login" type="text" value={login} onInput={ e=>setLogin(e.target.value)} />

【讨论】：