Material UI Outlined Input组件在React中显示异常问题排查

我在网站中使用Material UI的Outlined Input组件，按照MUI文档实现后，组件显示效果与预期不符（附图：）。尝试使用TextField组件也出现同样问题，以下是我的代码，请帮忙排查问题所在：

import React from 'react';
import { styled, Box, BoxProps, FormControl, OutlinedInput, InputAdornment } from '@mui/material';

import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';

const DesktopSearchBar = styled(Box)<BoxProps>(({ theme }) => ({
    display: "none",
    [theme.breakpoints.up("sm")]: {
        display: "flex"
    }
}));

const SearchBar: React.FC = () => {
    return (
        <DesktopSearchBar>
            <FormControl>
                <OutlinedInput
                    placeholder="Search here..."
                    autoComplete="off"
                    endAdornment={
                        <InputAdornment position="start">
                            <SearchOutlinedIcon />
                        </InputAdornment>
                    }
                />
            </FormControl>
        </DesktopSearchBar>
    );
};

export default SearchBar;

问题原因及修复方案 #

• FormControl缺失关键配置：OutlinedInput依赖FormControl的variant="outlined"属性渲染正确的边框样式，当前代码未设置该属性，导致边框显示异常。同时可添加fullWidth让输入框适配父容器宽度。
• InputAdornment位置属性错误：endAdornment对应的装饰元素应设置position="end"，而非start，否则图标位置会错乱。
• 缺少全局ThemeProvider：若项目根组件未用ThemeProvider包裹整个应用，MUI组件会丢失主题样式，导致显示异常。

修正后的代码 #

import React from 'react';
import { styled, Box, BoxProps, FormControl, OutlinedInput, InputAdornment, ThemeProvider, createTheme } from '@mui/material';

import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';

// 建议将ThemeProvider放在项目根组件，此处为示例补充
const theme = createTheme();

const DesktopSearchBar = styled(Box)<BoxProps>(({ theme }) => ({
    display: "none",
    [theme.breakpoints.up("sm")]: {
        display: "flex",
        width: '300px' // 可选：设置输入框基础宽度
    }
}));

const SearchBar: React.FC = () => {
    return (
        <ThemeProvider theme={theme}> {/* 根组件已配置可移除 */}
            <DesktopSearchBar>
                <FormControl variant="outlined" fullWidth>
                    <OutlinedInput
                        placeholder="Search here..."
                        autoComplete="off"
                        endAdornment={
                            <InputAdornment position="end">
                                <SearchOutlinedIcon />
                            </InputAdornment>
                        }
                    />
                </FormControl>
            </DesktopSearchBar>
        </ThemeProvider>
    );
};

export default SearchBar;

额外说明 #

• 优先确保项目根组件已通过ThemeProvider全局引入MUI主题，避免组件内重复包裹；
• fullWidth属性可根据布局需求调整，若父容器已有宽度设置，也可省略该属性。

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