Блог

я хочу изменить цвет без параметров. не могли бы вы мне помочь

 <Autocomplete
  id="id"
  options={options}
  limitTags={3}
  value={value}
  noOptionsText="no options"
  getOptionLabel={option => option}
  onChange={onChange}
  renderInput={params => (
   <TextField
   {...params}
   label=" title"
   placeholder="Please select"
   />
 )}
/>
  

В mui v5 существуют разные подходы

Решение 1 Использовать ThemeProvider

 import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    // Name of the component
    MuiAutocomplete: {
      styleOverrides: {
        // Name of the slot
        noOptions: {
          // Some CSS
          color: "red",
          backgroundColor: "pink",
        },
      },
    },
  },
});


<ThemeProvider theme={theme}>
<Autocomplete
  id="id"
  options={options}
  limitTags={3}
  value={value}
  noOptionsText="no options"
  getOptionLabel={option => option}
  onChange={onChange}
  renderInput={params => (
   <TextField
   {...params}
   label=" title"
   placeholder="Please select"
   />
 )}
/>
</ThemeProvider>
  

Решение 2
Использовать класс css для noOption prop, который .MuiAutocomplete-noOptions

файл css:

 .MuiAutocomplete-noOptions {
    background-color: pink;
    color: red!important;
}
  

Вы можете использовать classes реквизиты для применения стилей к определенному подкомпоненту компонента Autocomplete

 const useStyles = makeStyles({
  noOptions: {
    color: "red",
    backgroundColor: "pink"
  }
});

export default function Demo() {
  const styles = useStyles();
  return (
    <Autocomplete
      classes={{
        noOptions: styles.noOptions
      }}
      options={top100Films}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}
  

Живая демонстрация