У меня есть MUI-Select (material-ui.com) с выделенным вводом, который я хочу стилизовать, основываясь на том, выбрано ли что-то или нет.

const OutlinedInputStyles = makeStyles((theme: Theme) ={amp}gt; ({ root: { '{amp}amp;:hover $notchedOutline': { borderColor: 'blue', }, '{amp}amp;$focused $notchedOutline': { borderColor: 'blue', }, '{amp}amp;$focused $input': { backgroundColor: '#FFF', }, }, focused: {}, notchedOutline: {}, input: { color: 'blue', fontSize: '1.6em', padding: '18px 20px', }, })) ....... ....... {amp}lt;FormControl variant='outlined'{amp}gt; {amp}lt;InputLabel ref={inputLabel} classes={inputLabelStyles}{amp}gt; Age {amp}lt;/InputLabel{amp}gt; {amp}lt;Select id='label' classes={selectStyles} labelWidth={labelWidth} value={age} onChange={handleAgeChange} input={ {amp}lt;OutlinedInput labelWidth={labelWidth} classes={outlinedInputStyles} /{amp}gt; } {amp}gt; {amp}lt;MenuItem value={10} classes={menuItemStyles}{amp}gt; Ten {amp}lt;/MenuItem{amp}gt; {amp}lt;MenuItem value={20} classes={menuItemStyles}{amp}gt; Twenty {amp}lt;/MenuItem{amp}gt; {amp}lt;MenuItem value={30} classes={menuItemStyles}{amp}gt; Thirty {amp}lt;/MenuItem{amp}gt; {amp}lt;/Select{amp}gt; {amp}lt;/FormControl{amp}gt; 

Части «зависание» и «фокус» работают.

У меня есть TextFields где я использую '{amp}amp; input:valid fieldset' чтобы изменить стиль, если поле заполнено, но я не могу заставить это работать с выбором.

Я также попытался использовать :not(:empty) на входе select, но безуспешно.

У кого-нибудь есть идея продвинуть меня дальше?

С уважением.

CoonHouse

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,