英文:
How to properly change the font size from MUI TextField Label
问题
我想要能够从Material UI TextField组件中更改标签的字体大小。我已经想出了InputLabelProps，它非常有效，但正如您在下面的图片中所看到的，当焦点在标签上时，标签太过窄。
这是我的TextField的实现：
<TextField {...params} InputLabelProps={{
style : {color: '#518eb9', fontSize: 18, fontWeight: 1000}
}} label="Hovedkategori" />
我发现当焦点在标签上时显示的标签实际上来自另一个标签：
<legend class="css-1ftyaf0"><span>Hovedkategori</span></legend>
英文:
I would like to be able to change the label fontSize from the material ui TextField component. I've come up with the InputLabelProps which works great, but as you can see in the picture bellow the label is too squeezy when focused
Here is my implementation of the TextField
<TextField {...params} InputLabelProps={{
style : {color: '#518eb9', fontSize: 18, fontWeight: 1000}
}} label="Hovedkategori" />
I've found out that the label displayed when focused actually comes from another tag:
<legend class="css-1ftyaf0"><span>Hovedkategori</span></legend>
答案1
得分: 1
如果你想解决这个问题，你应该在你的TextField组件中添加一个修改MuiOutlinedInput-notchedOutline类的CSS。使用sx你可以修改这个类，并设置相同的字体大小来解决你的问题。
"&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }
<TextField
InputLabelProps={{
sx: {
color: "#518eb9",
fontSize: "28px",
fontWeight: 1000,
"&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }
}
}}
label="Hovedkategori"
/>
英文:
If you want resolve this problem you should add into your TextField component an css that modify MuiOutlinedInput-notchedOutline class.
With sx you can modify this class, and set the same font-size for fix your problem.
"&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }
<TextField
InputLabelProps={{
sx: {
color: "#518eb9",
fontSize: "28px",
fontWeight: 1000,
"&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }
}
}}
label="Hovedkategori"
/>
答案2
得分: 1
你可以使用 MUI 的 Box 组件，并设置 fontSize 和 fontWeight。
const LabelValue = (label) => {
return (
<Box color="#518eb9" fontSize={18} fontWeight={1000}>
{label}
</Box>
)
}
<TextField label={LabelValue("Hovedkategori")} />
英文:
You can use mui Box component and set fontSize and fontWeight
const LabelValue = (label) => {
return (
<Box color="#518eb9" fontSize={18} fontWeight={1000}>
{label}
</Box>
)
}
<TextField label={LabelValue("Hovedkategori")} />
答案3
得分: 0
我遇到了同样的问题，尝试使用 Mui 主题提供程序创建一个覆盖样式主题。那里有许多小的 div，它们可能会妨碍你，隐藏它们或移动它们。 MUI 主题
英文:
I've encountered the same problem, try to use Mui Theme provider to create a override style theme. There are many small divs there that can get in your way, hide them or move them.
MUI themes
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论