0
1K
VistasMUI: la etiqueta de selección delineada no se representa correctamente
Según la demostración, la etiqueta para una entrada de selección delineada de MUI debe ubicarse en la parte superior del borde superior del cuadro de selección.
Sin embargo, en mi aplicación, el z-index de la etiqueta parece colocarla detrás del borde superior y, por lo tanto, parece que una línea atraviesa la etiqueta.
Prácticamente he tomado el código exactamente de la documentación y, hasta donde yo sé, no tengo ningún estilo que entre en conflicto con este elemento de entrada. He comparado los estilos en el depurador con lo que tengo y lo que está presente en la documentación, y no veo ninguno de mis archivos CSS propios que provoquen que se establezca un estilo diferente en el elemento.
¿Alguna idea de lo que podría estar yendo mal aquí?
Aquí está el código fuente:
<FormControl variant='outlined' style={{ width: '100%' }} margin={'1'}> <InputLabel id='test-select-label'>Label</InputLabel> <Select labelId='test-select-label' id='test-select' value={'test1'} onChange={e => setTest(e.target.value)} size='small' > <MenuItem key={1} value={'test'} >Test 1</MenuItem> <MenuItem key={2} value={'test2'} >Test 2</MenuItem> </Select> </FormControl>3 Respuestas
Responde la pregunta0
Prueba este método, funcionó para mí.
JSX:
<TextField select variant={"outlined"} style={{width: "100%"}} label="Label"> <MenuItem key={1} value="test"> Test 1 </MenuItem> <MenuItem key={2} value="test2"> Test 2 </MenuItem> </TextField>CSS:
.MuiSelect-outlined.MuiSelect-outlined, .MuiSelect-outlined.MuiSelect-outlined:active, .MuiSelect-outlined.MuiSelect-outlined:focus { background-color: transparent; text-align: left; font-family: sans-serif !important; font-size: 14px !important; font-weight: 400 !important; }0
Si agrega la propiedad de la etiqueta a su componente seleccionado, su problema debería desaparecer.
... <Select value={value} onChange={(e) => setValue(e.target.value)} label="Label" // add this > <MenuItem key={1} value="test"> Test 1 </MenuItem> <MenuItem key={2} value="test2"> Test 2 </MenuItem> </Select> ...Aquí hay una demostración en vivo donde puedes ver la diferencia:
0
Solución 1: use TextField
Para eso está TextField . Utiliza FormControl e InputLabel internamente y se asegura de que funcionen bien juntos. Puede decirle a TextField que represente la select en lugar de la input anulando los accesorios de select :
<TextField value={value} onChange={(e) => setValue(e.target.value)} select // tell TextField to render select label="Label" > <MenuItem key={1} value="test"> Test 1 </MenuItem> <MenuItem key={2} value="test2"> Test 2 </MenuItem> </TextField> Para obtener más detalles sobre cómo funciona TextField , consulte esta respuesta.
Solución 2: Usar Select
Si decide usar Select , necesita escribir más código para hacer la misma cantidad de trabajo:
Pase el texto de la etiqueta como elementos secundarios de InputLabel
<InputLabel id="test-select-label">Label</InputLabel> El texto de esta etiqueta se representará en la pantalla como la etiqueta Select cuando se coloque dentro FormControl y al lado del componente Select .
Pase el texto de la label a los accesorios de etiqueta del componente Select
Este texto de etiqueta está oculto y se usa para anular y eliminar la parte del border-top donde está ocupada la etiqueta real cuando se reduce la etiqueta Select .
<Select labelId="test-select-label" label="Label">Al juntarlo, tendremos algo como a continuación, tenga en cuenta que con este enfoque necesitamos colocar la etiqueta en 2 lugares diferentes que no son muy SECOS, por lo que prefiero el primer enfoque.
<FormControl> <InputLabel id="test-select-label">Label</InputLabel> <Select value={value} onChange={(e) => setValue(e.target.value)} labelId="test-select-label" label="Label" > <MenuItem key={1} value="test"> Test 1 </MenuItem> <MenuItem key={2} value="test2"> Test 2 </MenuItem> </Select> </FormControl>Demo en vivo