如何在MUI多行TextField中添加实线？

问题说明 #

我尝试在MUI的多行TextField中添加实线边框，但不知如何操作：

• 期望效果：输入框四周带有完整的实线边框
• 当前效果：仅显示底部下划线
• 当前代码：

<TextField
    multiline
    rows={2}
    name='address'
    variant='standard'
    label="Địa chỉ"
/>

解决方案 #

方法1：直接改用outlined变体（最简便）

MUI提供的outlined变体原生就带实线边框，只需修改variant属性：

<TextField
    multiline
    rows={2}
    name='address'
    variant='outlined'
    label="Địa chỉ"
/>

方法2：自定义standard变体样式（保留原有变体）

如果不想切换变体，可通过sx属性覆盖默认样式，添加实线边框并隐藏原有下划线：

<TextField
    multiline
    rows={2}
    name='address'
    variant='standard'
    label="Địa chỉ"
    sx={{
        '& .MuiInput-root': {
            border: '1px solid rgba(0, 0, 0, 0.23)',
            borderRadius: '4px',
            padding: '0 8px',
            // 移除默认的上下划线
            '&:before, &:after': {
                display: 'none'
            }
        },
        // 调整输入内容内边距，避免紧贴边框
        '& .MuiInput-input': {
            padding: '10px 0'
        }
    }}
/>

方法3：用styled创建可复用的自定义组件

如果需要在多个地方使用该样式，推荐用MUI的styled工具封装自定义组件：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const StyledMultilineTextField = styled(TextField)(({ theme }) => ({
    '& .MuiInput-root': {
        // 根据主题模式适配边框颜色
        border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0,0,0,0.23)' : 'rgba(255,255,255,0.23)'}`,
        borderRadius: theme.shape.borderRadius,
        padding: '0 8px',
        '&:before, &:after': {
            display: 'none'
        }
    },
    '& .MuiInput-input': {
        padding: '10px 0'
    }
}));

// 使用示例
<StyledMultilineTextField
    multiline
    rows={2}
    name='address'
    variant='standard'
    label="Địa chỉ"
/>

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