Tengo un MUI-Select (material-ui.com) con una entrada resumida, que quiero diseñar según si algo está seleccionado o no.

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; 

La parte ‘flotar’ y ‘enfocar’ está funcionando.

Tengo TextFields donde uso '{amp}amp; input:valid fieldset' para cambiar el estilo si el campo está lleno, pero no puedo hacer que esto funcione en la selección.

También intenté usar :not(:empty) en la entrada de selección, pero no tuve éxito.

¿Alguien una idea para llevarme más lejos con esto?

Saludos.

CoonHouse

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.