改变材质UI v5中浮动标签的字体大小

Question

我想要更改React v5中输入字段的浮动标签的字体大小。

一年前，当我们还在第4版的时候，我就查过了。那时，当“浮动”似乎是硬编码时，标签后面的封面面积的计算似乎很难，这使得很难很容易地改变它。

现在v5中是否有一个适当的解决方案，可以对输入字段的浮动标签进行简单的调整？对fontSize的更改需要在浮动时反映在标签的行为中，方法是调整标签后面的白色覆盖区域。

Answer 1

不幸的是，虽然有一些方法可以更改标签的文本大小，但是在使用variant: outline时也没有简单的方法来调整“凹槽”大小。

我会这样做：

1. 为OutlinedInput的notchedOutline类设置字体大小(这将设置缺口的宽度)

。

    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          fontSize: '2em'
        }
      }
    },

1. 将MuiInputLabel的&.MuiInputLabel-shrink类的字体大小设置为匹配(这将设置缩小的文本大小)

。

    MuiInputLabel: {
      styleOverrides: {
        outlined: {
          '&.MuiInputLabel-shrink': {
            fontSize: '2em',
          },
        }
      }
    },

3)。(可选)还可以更改MuiInputLabel的&.MuiInputLabel-shrink类上的transform属性(这可以使文本在大纲行中居中，您必须对此进行实验，并选择一个适合您的字体大小的数字)。

    MuiInputLabel: {
      styleOverrides: {
        outlined: {
          '&.MuiInputLabel-shrink': {
            fontSize: '2em',
            transform: 'translate(14px, -19px) scale(0.75)'
          },
        }
      }
    },

注意:这一切都是在您的theme.js (docs：https://mui.com/customization/theme-components/#global-style-overrides)中重写样式时完成的。