reactjs 如何正确更改MUI TextField标签的字体大小

ct2axkht 于 2023-03-08 发布在 React

关注(0)|答案(3)|浏览(190)

我希望能够改变标签的字体大小从材料ui的文本字段组件。我已经拿出了InputLabelProps的工作很好，但你可以看到在图片波纹管的标签是太挤压时，重点

下面是我对TextField的实现

<TextField {...params} InputLabelProps={{
    style : {color: '#518eb9', fontSize: 18, fontWeight: 1000}
}} label="Hovedkategori" />

我发现聚焦时显示的标签实际上来自另一个标记：

<legend class="css-1ftyaf0"><span>Hovedkategori</span></legend>

reactjs

来源：https://stackoverflow.com/questions/75662280/how-to-properly-change-the-font-size-from-mui-textfield-label

3条答案

按热度按时间

i5desfxk1#

如果你想解决这个问题，你应该在你的TextField组件中添加一个css来修改MuiOutlinedInput-notchedOutline类。使用sx你可以修改这个类，并设置相同的字体大小来解决你的问题。

"&. Mui带轮廓输入开槽轮廓”：{字体大小：“28像素”}*

<TextField
    InputLabelProps={{
      sx: {
        color: "#518eb9",
        fontSize: "28px",
        fontWeight: 1000,
        "&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }
      }
    }}
    label="Hovedkategori"
  />

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

xpcnnkqh2#

我也遇到过同样的问题，尝试使用Mui主题提供程序来创建一个覆盖样式主题。有很多小的div，可以让你的方式，隐藏他们或移动他们。MUI themes

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

gjmwrych3#

您可以使用mui Box组件并设置fontSize和fontWeight

const LabelValue = (label) => {
    return (
        <Box color="#518eb9" fontSize={18} fontWeight={1000}>
            {label}
        </Box>
    )
}

 <TextField label={LabelValue("Hovedkategori")} />

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

我来回答

reactjs 如何正确更改MUI TextField标签的字体大小

3条答案

相关问题

热门标签

最新问答