如何移除Material-UI中outlined类型TextField组件的外边框

outlined类型的Material UI TextField边框默认绑定在内部fieldset元素上，普通行内style无法触及内部元素，因此常规配置不生效，以下是实测可行的三种解决方案：

方案1：单组件直接修改（MUI v5+推荐） #

直接在现有组件上添加sx属性覆盖样式，同时适配默认、hover、聚焦三种状态：

<TextField
    variant="outlined"
    label=""
    multiline rows={55}
    placeholder="# Hello World"
    style={{ width: '90%' }}
    sx={{
        '& .MuiOutlinedInput-notchedOutline': {
            border: 0,
        },
        '&:hover .MuiOutlinedInput-notchedOutline': {
            border: 0,
        },
        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            border: 0,
        }
    }}
/>

方案2：封装可复用无框组件 #

适合项目内多处需要使用无外边框TextField的场景：

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

const NoBorderOutlinedTextField = styled(TextField)({
    '& .MuiOutlinedInput-notchedOutline': {
        border: 0,
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
        border: 0,
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        border: 0,
    }
});

// 业务侧直接调用即可
<NoBorderOutlinedTextField
    variant="outlined"
    label=""
    multiline rows={55}
    placeholder="# Hello World"
    style={{ width: '90%' }}
/>

方案3：全局配置生效 #

如果需要项目内所有outlined类型TextField都去掉外边框，直接修改全局主题配置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
    components: {
        MuiOutlinedInput: {
            styleOverrides: {
                notchedOutline: {
                    border: 0,
                },
                root: {
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                        border: 0,
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                        border: 0,
                    }
                }
            }
        }
    }
});

// 把项目根组件包裹在ThemeProvider中即可全局生效

如果你使用的是MUI v4版本，将上述样式规则放到makeStyles生成的类名中即可生效。

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