我有一個帶有和帶有默認設置的MUI文本字段，看起來都不錯:

但是如果我把字體變大(見下面的主題),邊界線就會和標簽重疊:

function MyForm() {
return (
    <>
        <div>a</div>
        <div><TextField variant={'outlined'} label="Type something" value={'my value'}/></div>
    </>
);}


const themeOptions: ThemeOptions = {
components: {
    MuiInputLabel: {
        styleOverrides: {
            root: {
                fontSize: '1rem', // make labelfont bigger
            },
        },
    },

文本字段有兩個主要方面會影響輪廓中凹口的大小以及標簽是否適合該凹口。

輸入標簽大小 當標簽在輪廓的凹口中時，這意味著shrink=true，默認情況下，這發生在輸入有焦點或已經有值時。收縮情況下應用的相關樣式是transform:“translate(14px，-9px) scale(0.75)”，因此標簽文本在不處于收縮狀態時將是標簽大小的0.75倍。

切口尺寸 輪廓中凹口的空間由OutlinedInput的fieldset元素中圖例元素的大小控制。圖例元素的相關樣式是fontSize:“0.75 em”。這意味著圖例空間將基于使用0.75 * outlined input字體大小的標簽大小。請注意，此圖例不顯示標簽。它包含標簽文本的副本以控制大小，但其樣式中具有不透明度:0，因此除了在輪廓中創建凹口的塊之外，它是不可見的。然后，InputLabel元素將標簽文本放在相同的位置。

需要認識到的一件重要事情是，缺省的凹口大小取決于OutlinedInput的字體大小與InputLabel的字體大小相同。

有兩種不同的選項來確定凹口的大小:

將OutlinedInput的字體大小更改為與標簽相同，這樣輸入的文本將與非收縮標簽大小相匹配。

import * as React from "react";
import TextField from "@mui/material/TextField";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const labelFontSize = "1.25rem";
export default function TextFieldWithLargerLabel() {
  const theme = createTheme({
    components: {
      MuiInputLabel: {
        styleOverrides: {
          root: {
            fontSize: labelFontSize
          }
        }
      },
      MuiOutlinedInput: {
        styleOverrides: {
          root: {
            fontSize: labelFontSize
          }
        }
      }
    }
  });
  return (
    <ThemeProvider theme={theme}>
      <TextField id="outlined-basic" label="Type something" />
    </ThemeProvider>
  );
}

如果希望標簽大小大于輸入文本大小，則可以更改控制凹口的圖例的字體大小，以匹配收縮標簽大小。

import * as React from "react";
import TextField from "@mui/material/TextField";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const labelFontSize = "1.25rem";
export default function TextFieldWithLargerLabel() {
  const theme = createTheme({
    components: {
      MuiInputLabel: {
        styleOverrides: {
          root: {
            fontSize: labelFontSize
          }
        }
      },
      MuiOutlinedInput: {
        styleOverrides: {
          root: {
            "& > fieldset > legend": {
              fontSize: `calc(0.75 * ${labelFontSize})`
            }
          }
        }
      }
    }
  });
  return (
    <ThemeProvider theme={theme}>
      <TextField id="outlined-basic" label="Type something" />
    </ThemeProvider>
  );
}

問題來自于它只增加了標簽的大小而沒有增加輸入的大小。

要解決這個問題，您可以執行以下操作:

import * as React from "react";

import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import OutlinedInput from "@mui/material/OutlinedInput";

export default function MyForm() {
  return (
    <FormControl>
      <InputLabel htmlFor="input-outlined" sx={{ fontSize: 20 }}>
        Type something
      </InputLabel>
      <OutlinedInput
        id="input-outlined"
        label="Type something"
        sx={{ fontSize: 20 }}
      />
    </FormControl>
  );
}