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

【问题标题】：Styling MUI Autocomplete with styled-components使用样式组件设置 MUI 自动完成样式
【发布时间】：2022-01-06 20:33:38
【问题描述】：

我的代码中有来自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 文档中的.MuiAutocomplete-option，但这似乎不起作用）。非常感谢任何帮助。

【问题讨论】：

标签： reactjs material-ui styled-components

【解决方案1】：

您可以按照自己的习惯设计Autocomplete 组件的不同部分。

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

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

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

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

在此示例中，选项的文本颜色应为绿色。

您需要通过自动完成组件的 renderOption 属性传递 StyledOptionBox：

<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>
  )}
/>

在这里找到它的工作版本： https://codesandbox.io/s/reverent-stallman-tpwkw?file=/src/App.js

您可以在 MUI 文档中的 Github's Picker example 中找到有关更改（以及可能发生的事情）的更多灵感。

【讨论】：