如何从渲染位置向Material UI Autocomplete组件传递自定义样式

你当前的写法存在关键问题：Material UI的classes属性接受的是CSS类名字符串，而非内联样式对象，直接把styling对象传给Autocomplete的classes.input不会生效。下面提供两种贴合你现有调用方式的解决方案：

方案一：使用内联样式（style属性） #

你调用组件时传递的styling是标准内联样式对象，直接绑定到需要样式的元素即可，比如外层容器或内部输入框：

修改后的组件代码 #

function EmployeeSearch(props) {
    const { onChange, badge, label, id, disabled, styling, status, ...other } = props;
    const classes = useStyles();

    // 按需拆分样式到不同元素
    const containerStyle = {
        marginTop: styling.marginTop,
        width: styling.width
    };
    const inputStyle = {
        fontSize: styling.fontSize
    };

    return (
        <Box style={containerStyle}>
            <Autocomplete
                InputProps={{ 
                    classes: { input: classes.fields },
                    style: inputStyle
                }}
                renderInput={(params) => ( 
                    <TextField {...params} /> 
                )}
                {...other}
            />
        </Box>
    );
}

说明 #

• 外层Box的style控制组件整体的外边距、宽度等布局样式
• InputProps.style专门控制输入框的字体大小等内部样式
• 若无需拆分，也可直接把styling绑定到Box上，让样式继承到内部元素（需确保样式支持继承，如字体大小）

方案二：传递自定义CSS类名（适合复杂样式场景） #

如果需要使用伪类、媒体查询等复杂CSS规则，可改为传递类名字符串：

调用处修改 #

<EmployeeSearch
    // 其他属性...
    stylingClass="owner-search" // 传递自定义类名
/>

组件内修改 #

function EmployeeSearch(props) {
    const { stylingClass, ...otherProps } = props;
    const classes = useStyles();

    return (
        <Box className={stylingClass}>
            <Autocomplete
                InputProps={{ classes: { input: `${classes.fields} ${stylingClass}` } }}
                renderInput={(params) => ( <TextField {...params} /> )}
                {...otherProps}
            />
        </Box>
    );
}

说明 #

• 在全局样式或组件的useStyles中定义.owner-search的样式规则
• 通过类名组合，保留原有classes.fields样式的同时叠加自定义样式

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