使用样式化组件设置 MUI 自动完成样式

Question

我的代码中有来自

mui

的 AutoComplete 组件，并且我将其与他们的

TextField

组件一起使用，如下所示：

<StyledAutoComplete
  id="xxx"
  clearOnEscape
  options={[...]}
  renderInput={(params) => (
    <TextField {...params} label="clearOnEscape" variant="standard" />
  )}
/>

其中

StyledAutoComplete

是以下样式组件：

export const StyledAutocomplete = styled(Autocomplete)`
  .MuiAutocomplete-option {
    color: white;
  }
  .MuiAutocomplete-inputRoot {
    color: white;
  }
  .MuiAutocomplete-clearIndicator {
    color: white;
  }
  .MuiAutocomplete-popupIndicator {
    color: white;
  }
`;

这适用于某些样式（例如输入中的文本颜色），但我不知道如何设置输入的label

或选项的文本颜色（我尝试使用来自AutoComplete API 文档但这似乎不起作用）。非常感谢任何帮助。

您可以按照您习惯的方式设计

Answer 1

组件的不同部分。

为了呈现 TextField（标签）所需的自定义，您可以传递 StyledTextField。

Autocomplete

在示例中，我们期望标签在未选择和焦点状态下为绿色。 以类似的方式，您可以创建一个包含所需更改的 StyledOptionBox：

const StyledTextField = styled(TextField)({
  "& label, & label.Mui-focused": {
    color: "green"
  }
});

在此示例中，选项的文本颜色应为绿色。您需要通过自动完成组件的 renderOption 属性传递

const StyledOptionBox = styled(Box)({
  color: "green"
});

：

StyledOptionBox

在此处找到它的工作版本：

https://codesandbox.io/s/reverent-stallman-tpwkw?file=/src/App.js

有关更改（以及可能的情况）的更多灵感，您可以在 MUI 文档中的 Github 的选取器示例

中找到。

查看我的自定义自动完成组件解决方案：

Answer 2

<Autocomplete
  id="xxx"
  clearOnEscape
  options={[
    { id: "test", label: "x" },
    { id: "test2", label: "y" }
  ]}
  renderInput={(params) => (
    <StyledTextField
      {...params}
      label="clearOnEscape"
      variant="standard"
    />
  )}
  renderOption={(props, option) => (
    <li {...props}>
      <StyledOptionBox>{option.label}</StyledOptionBox>
    </li>
  )}
/>

还必须在我的 css 文件中覆盖这个 mui 类：

interface Props<T> {
    id: string;
    label: string;
    options: T[];
}

const CustomInput = styled(TextField)<TextFieldProps>(({ theme }) => ({
    backgroundColor: theme.palette.warning.main,
    borderRadius: "4px",
}));

const CustomDropDown = ({ id, label, options }: Props<OptionType>) => {
    return (
        <ThemeProvider theme={customTheme}>
            <Autocomplete
                disablePortal
                id={id}
                options={options}
                sx={{ color: "whitesmoke" }}
                PaperComponent={(props) => (
                    <Paper
                        {...props}
                        sx={{
                            backgroundColor: customTheme.palette.secondary.light,
                            color: "whitesmoke",
                        }}
                    />
                )}
                renderInput={(params) => (
                    <CustomInput
                        {...params}
                        label={label}
                        size="small"
                        color="info"
                    />
                )}
            />
        </ThemeProvider>
    );
};