material-ui 表单标签位置

Question

使用

Material-ui

+

react

制作表格。有没有办法将标签布局到输入字段的一侧？它更具可读性。

就像这样：

name   [input]
title  [input]

而不是

name  
[input]
title 
[input]

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

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

Answer 1

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

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

Answer 2

使用 MUI v5

FormControl

，您可以使用

sx

更改弯曲方向：

<FormControl sx={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
  <FormLabel>Mode:</FormLabel>
  <RadioGroup row {...field}>
    <FormControlLabel control={<Radio />} value="true" label="Test" />
    <FormControlLabel control={<Radio />} value="false" label="Live" />
  </RadioGroup>
</FormControl>