CODEWITHSUNDEEP
reactjsautocompletematerial-uistyles
victor
victor

Reputation: 23

How to apply style on NoOptionsText in autocomplete material-ui

i want to change color of no options. can you please help me

image link

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

Upvotes: 2

Views: 3171

Answers (2)

deepen
deepen

Reputation: 61

In mui v5 there are different approaches

Solution 1 To use 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>

Solution 2 To use css class for noOption prop which is .MuiAutocomplete-noOptions

css file:

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

Upvotes: 3

NearHuscarl
NearHuscarl

Reputation: 81653

You can use classes props to apply styles to a specific sub-component of the Autocomplete component

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

Live Demo

Edit 63949999/how-to-apply-style-on-nooptionstext-in-autocomplete-material-ui/63950742#63950742

Upvotes: 1

Related Questions