reactjs 如何在Material UI中对TextField输入和标签应用填充？

ocebsuys 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(156)

我已经开始在一个项目中使用Material UI。我为表单域创建了一个TextField，如下所示。我正尝试将填充应用到这个输入字段，如下所示，但标签不受此填充的影响。

<TextField
          sx={{ display: "flex", padding: "20px 0px" }}
          name="mail"
          label="Email"
          type="mail"
          id="mail"
          placeholder="Enter email"
          variant="standard"
          inputProps={{
            sx: {  fontSize: "13px", marginTop: "4px" }
          }}
          InputLabelProps={{
            shrink: true,
            sx: {
             fontSize: "12px"
            }
          }}
        />

字符串
我应该怎么做才能为输入沿着标签提供填充？

reactjs

来源：https://stackoverflow.com/questions/76802839/how-can-i-apply-padding-to-both-the-textfield-input-and-label-in-material-ui

2条答案

按热度按时间

yqkkidmi1#

标签不受填充更改的影响，因为它是position: absolute，使其成为positioned element。您可以通过将top, left, bottom, right props添加到InputLabelPropssx值来移动标签。

InputLabelProps={{
  shrink: true,
  sx: {
   fontSize: "12px",
   left: "1rem",
   right: "1rem",
  }
}}

字符串
下面是一个Code Sandbox repro，标签移动到与输入填充对齐。
下面的屏幕截图显示了将top和left值添加到InputLabelProps样式的结果
x1c 0d1x的数据
希望这有帮助！

赞(0）回复(0）举报 2023-08-04

ffscu2ro2#

输入标签具有绝对位置。因此，填充和边距在这里将不起作用。顶部、底部、右侧和左侧位置将起作用。你可以试试下面的代码。

<TextField        
    name="mail"
    label="Email"
    type="mail"
    id="mail"
    variant="standard"
    placeholder="Enter email"
    inputProps={{
      sx: { fontSize: "13px", marginTop: "4px" },
    }}
    InputLabelProps={{
      shrink: true,
      sx: {
        fontSize: "12px",
        bottom: "20px"
      },
    }}
  />

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs 如何在Material UI中对TextField输入和标签应用填充？

2条答案

相关问题

热门标签

最新问答