Color in autocomplete-CodePudding

I have autocomplete element, the color property warning only works on focus, any workarounds?

https://codesandbox.io/s/angry-jennings-jdqt1b?file=/demo.tsx

I wish the warning color will be all the time.

CodePudding user response：

You have 2 options

First, just add focused prop in TextField

like this :

<TextField {...params} color="warning" label="Movie" focused  />

Second, add a className to TextField and override label and input style

like this :

<TextField {...params} className="warningInput" color="warning" label="Movie"   />

and styles:

.warningInput .MuiInputLabel-root {
  color: #ed6c02;
}

.warningInput .MuiOutlinedInput-notchedOutline {
  border-color: #ed6c02;
  border-width: 2px;
}