如何推导Material-UI组件styleOverrides？MUI5 TextField边框颜色定制问题

尝试自定义MUI5的TextField组件颜色，仅覆盖primary和secondary颜色无法满足需求，需要更精细的颜色控制。

组件代码 #

<TextField
    label='Username'
    variant='outlined'
    onChange={(e) => setToken(e.target.value)}
    value={token}
    size='small'
/>

当前主题配置 #

const theme = createTheme({
    components: {
        MuiTextField: {
            styleOverrides: {
                root: {
                    '.MuiOutlinedInput-root': {
                        '.MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                        '&:hover .MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                    },
                },
            },
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    color: 'pink',
                    '&.Mui-focused': {
                        color: 'pink',
                    },
                },
            },
        },
    },
});

已实现的颜色控制 #

• TextField聚焦和未聚焦状态下的标签（Username）颜色
• TextField未聚焦或（聚焦且hover）状态下的边框颜色

遇到的问题 #

无法修改TextField处于激活（focused）但未hover状态时的边框颜色，此时应用的样式为：css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput-notchedOutline

1. 修改激活（focused）未hover状态的边框颜色 #

核心是让自定义样式的优先级和MUI默认样式匹配，直接针对Mui-focused状态下的notchedOutline设置样式。可以通过两种方式实现：

方式一：单独配置MuiOutlinedInput #

调整主题配置，新增MuiOutlinedInput的styleOverrides：

const theme = createTheme({
    components: {
        MuiTextField: {
            styleOverrides: {
                root: {
                    '.MuiOutlinedInput-root': {
                        '.MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                        '&:hover .MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                    },
                },
            },
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    color: 'pink',
                    '&.Mui-focused': {
                        color: 'pink',
                    },
                },
            },
        },
        // 新增配置
        MuiOutlinedInput: {
            styleOverrides: {
                root: {
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                        borderColor: 'pink', // 替换为你需要的颜色
                    },
                },
            },
        },
    },
});

方式二：合并到MuiTextField的配置中 #

直接在MuiTextField的root样式里补充focused状态的选择器：

const theme = createTheme({
    components: {
        MuiTextField: {
            styleOverrides: {
                root: {
                    '.MuiOutlinedInput-root': {
                        '.MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                        '&:hover .MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                        // 补充focused状态样式
                        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                            borderColor: 'pink',
                        },
                    },
                },
            },
        },
        MuiInputLabel: {
            styleOverrides: {
                root: {
                    color: 'pink',
                    '&.Mui-focused': {
                        color: 'pink',
                    },
                },
            },
        },
    },
});

2. 是否需要基于基础组件构建自定义组件？ #

如果只是做颜色这类纯样式的精细控制，用主题styleOverrides就足够，不需要重新构建组件，这种方式能统一管理全局同类型组件的样式，更简洁。

但如果后续要添加自定义交互逻辑、额外props，或者这个自定义TextField会在项目中大量复用，封装成独立组件会更合适。示例如下：

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

const CustomTextField = styled(TextField)(({ theme }) => ({
    '& .MuiOutlinedInput-root': {
        '& .MuiOutlinedInput-notchedOutline': {
            borderColor: 'pink',
        },
        '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'pink',
        },
        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: 'pink',
        },
    },
    '& .MuiInputLabel-root': {
        color: 'pink',
        '&.Mui-focused': {
            color: 'pink',
        },
    },
}));

// 使用时直接替换原TextField
<CustomTextField
    label='Username'
    variant='outlined'
    onChange={(e) => setToken(e.target.value)}
    value={token}
    size='small'
/>

这种方式能把样式和组件绑定，复用更方便，还能避免全局样式冲突。

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