如何修复MUI OutlinedInput设置背景色后顶部白边问题

环境版本 #

• @mui/material: "^5.16.6"
• react: "^18.2.0"

问题描述 #

设置OutlinedInput组件的background-color时，出现顶部超出边框的白边，当前代码如下：

<OutlinedInput 
    size='small'
    sx={{backgroundColor: '#fff'}}
    defaultValue={'Hello world'}
/>  

解决方法 #

方法一：精准定位内部input元素设置背景色 #

直接给外层OutlinedInput设置背景色会覆盖到边框外的区域，只需把样式精准应用到内部的input标签即可：

<OutlinedInput 
    size='small'
    sx={{ '& input': { backgroundColor: '#fff' } }}
    defaultValue={'Hello world'}
/>  

方法二：添加overflow:hidden裁剪超出部分 #

通过给OutlinedInput设置overflow: hidden，让超出边框的背景色部分被隐藏：

<OutlinedInput 
    size='small'
    sx={{ backgroundColor: '#fff', overflow: 'hidden' }}
    defaultValue={'Hello world'}
/>  

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