英文:
How can I apply padding to both the TextField input and label in Material UI?
问题
我已经开始在项目中使用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"
}
}}
/>
为了为输入字段和标签提供填充，你可以尝试将填充样式应用于InputProps和InputLabelProps中的sx属性，如下所示：
<TextField
sx={{ display: "flex" }}
name="mail"
label="Email"
type="mail"
id="mail"
placeholder="Enter email"
variant="standard"
InputProps={{
sx: {
padding: "20px 0px",
fontSize: "13px",
marginTop: "4px"
}
}}
InputLabelProps={{
shrink: true,
sx: {
fontSize: "12px",
paddingTop: "20px" // Add padding to the label
}
}}
/>
这将同时应用填充样式到输入字段和标签。
英文:
I have started using Material UI for a project. I created a TextField for a form field as shown below. I am trying to apply padding to this input field as demonstrated below, but the label is not being affected by this padding.
<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"
}
}}
/>
What should I do in order to provide padding to the input along with the label?
答案1
得分: 1
标签不受您的填充更改影响，因为它是position: absolute，使其成为定位元素。您可以通过在InputLabelProps的sx值中添加top、left、bottom、right属性来移动标签。
InputLabelProps={{
shrink: true,
sx: {
fontSize: "12px",
left: "1rem",
right: "1rem",
}
}}
这是一个Code Sandbox示例，其中标签已移动以与输入的填充对齐。
这是一个添加了top和left值到InputLabelProps样式的结果的截图。
希望对您有所帮助！
英文:
The label is not affected by your padding changes because it is position: absolute making it a positioned element. You can move the label around by adding top, left, bottom, right props to the InputLabelProps sx value.
InputLabelProps={{
shrink: true,
sx: {
fontSize: "12px",
left: "1rem",
right: "1rem",
}
}}
Here is a Code Sandbox repro with the label moved to align with the inputs padding.
And here's a screenshot showing the result of adding top and left values to the InputLabelProps styling
Hope this Helps!
答案2
得分: 1
输入标签具有绝对位置。因此，填充和边距在此处不起作用。上、下、右和左位置将起作用。您可以尝试以下代码。
<TextField
name="mail"
label="电子邮件"
type="email"
id="mail"
variant="standard"
placeholder="输入电子邮件"
inputProps={{
sx: { fontSize: "13px", marginTop: "4px" },
}}
InputLabelProps={{
shrink: true,
sx: {
fontSize: "12px",
bottom: "20px"
},
}}
/>
英文:
The input label has the absolute position. So padding and margin will not work here. top, bottom, right, and left positions will work. You can try the below code.
<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"
},
}}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论