MUI v5中outlined变体TextField组件角落出现多余空白如何解决

问题复现 #

使用的组件代码：

<TextField className={styles.input} label="First Name" variant="outlined" size="small" />

配套自定义样式：

.input{
    background-color: white;
    width: 400px;
}

异常表现：绿色背景的Paper组件内嵌入上述TextField后，TextField四个圆角位置出现多余白色块，预期该位置透出Paper的绿色，效果如下：

原因说明 #

outlined 变体的TextField根节点默认是无圆角的直角块元素，直接给根节点设置白色背景时，背景会铺满整个直角矩形区域。但组件内部负责渲染外描边的<fieldset>元素默认自带圆角（size="small"规格下圆角为4px，默认medium规格下为8px），四个圆角位置超出fieldset范围的根节点白色背景会直接外露，形成突兀的边角白块。

修复方案 #

二选一即可：

• 方案1：最小改动，补全根节点样式，添加匹配的圆角和溢出裁剪

.input{
    background-color: white;
    width: 400px;
    /* 新增下方两行样式 */
    border-radius: 4px; /* 若使用默认medium尺寸，将值改为8px */
    overflow: hidden;
}

• 方案2：精准绑定样式到内部输入容器，无需手动匹配圆角值，符合MUI样式定制规范
  直接在TextField上通过sx属性将背景色绑定到自带圆角的MuiOutlinedInput-root容器上，根节点仅保留宽度配置即可：

<TextField 
  label="First Name" 
  variant="outlined" 
  size="small"
  className={styles.input}
  sx={{
    '& .MuiOutlinedInput-root': {
      backgroundColor: '#ffffff'
    }
  }}
/>

对应原有.input样式移除background-color配置，仅保留宽度设置：

.input{
    width: 400px;
}

内容的提问来源于stack exchange，提问作者steve238