当 React Material UI 中的 TextField 中存在值时自定义自动完成 CSS

Posted 2023-02-22

【中文标题】当 React Material UI 中的 TextField 中存在值时自定义自动完成 CSS

【英文标题】：Customize Autocomplete CSS when value is present in the TextField in React Material UI

【发布时间】：2020-07-30 17:22:45

【问题描述】：

我在具有嵌套 TextField 的项目中使用 React Material 自动完成字段。我目前已经对其应用了标准样式（当没有值存在并且只在字段中显示标签时），以及悬停时的不同样式。但是，如果 TextField 中有一个值，我希望将相同的悬停样式应用于整个自动完成框（不仅仅是 TextField 元素），但我无法弄清楚如何做到这一点。我的自动完成代码和当前的 CSS 样式如下。请任何人帮忙，让我知道我该怎么做？

自动完成代码

const renderComponentList = (componentList, isDisabled, name, label) => (
    componentList &&
    <Autocomplete
        classes=
            root: classes.root,
        
        options=componentList
        disabled=isDisabled
        name=name
        getOptionLabel=(option) => option.name
        onChange=
            (event, value, reason) => 
                this.handleAutocompleteChange(name, value);
            
        
        style=width: '100%'
        renderInput=
            (params) =>
                <TextField
                    ...params
                    name=name
                    label=label
                    variant="outlined"
                />
        
    />
);

CSS 样式

export const styles = theme => (
    // Autocomplete option styles
    root: 
        color: '#FFFFFF',
        backgroundColor: '#303039',
        opacity: 0.6,
        "&:hover": 
            backgroundColor: '#1E1E24',
            borderRadius: '5px',
            opacity: 1,
        ,
        "&:focus-within": 
            backgroundColor: '#1E1E24',
            borderRadius: '5px',
            opacity: 1,
        ,
        // Something like this to style the autocomplete when input has a value, but this only
        // targets the input field (TextField) rather than the whole Autocomplete field
        // "& input[value]:not([value=''])": 
        //     backgroundColor: '#1E1E24',
        //     borderRadius: '5px',
        //     opacity: 1,
        // ,
        "& .MuiOutlinedInput-notchedOutline": 
            border: '1px solid #484850',
        ,
        "&:hover .MuiOutlinedInput-notchedOutline": 
            border: '1px solid #484850',
        ,
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": 
            border: '1px solid #484850',
            borderRadius: '5px 5px 0 0',
        ,
        "& .MuiInputLabel-outlined": 
            color: '#FFFFFF',
        ,
        "& .Mui-disabled": 
            opacity: 0.6,
        ,
        "& .Mui-disabled .MuiOutlinedInput-notchedOutline": 
            border: '1px solid #484850',
        ,
    ,
);

【问题讨论】：

不幸的是，目前没有。我还没有部署它，它只在测试环境中运行。在不部署完整项目的情况下如何为 React 项目创建在线演示？

@SunnyHebbar 使用 codepen

@keikai 对不起，我可能会措辞更好。我要做的就是在选择一个值并且该字段不再处于焦点时将 backgroundColor: '#1E1E24', 样式应用于 Autocomplete 元素（不仅仅是 TextField 元素）

@keikai 这可以在类组件中使用吗？我没有使用 Redux 或钩子，只是使用构造函数中声明的状态的普通 React。如果它会起作用，那么我愿意试一试

@keikai 我的项目目前的配置方式，我已经在单独的文件中声明了样式 const 中的样式。然后我将它导入到我的组件文件中，并使用withStyles HOC 让我的组件可以访问样式——通过在组件文件底部声明export default withStyles(styles)(SelectForm);。希望这是有道理的

【参考方案1】：

我已经设法解决了这个问题。当值存在时，我必须为所需样式创建一个新类，并根据相关状态有条件地在 Autcomplete 元素中呈现它。

为了有条件地渲染该类，我必须将 stateVal 作为我函数中的道具之一传递，然后将自动完成类属性中的 root 行改为 root: stateVal ? classes.rootHasVal : classes.rootHasNoVal,。