0
179
Vistas¿Cómo diseñar un elemento específico/único o un componente usando Css personalizado en React Js?
He estado tratando de diseñar la barra de búsqueda, que es el componente TextFiled utilizado en la biblioteca React Material Ui. Sin embargo, traté de hacerlo usando CSS externo e integrado, pero no obtuve resultados.
Traté de usar Withstyle, funciona pero también afecta a otros TextFiled en otros componentes. El problema es cómo solo se puede apuntar a un elemento específico.
La barra de búsqueda real/la imagen de TextFiled está debajo en el borde negro de manera predeterminada. Quiero que sea blanca.
El código que probé:
const TextFiledStyle = withStyles({ root: { '& .MuiOutlinedInput-root': { '& fieldset': { borderColor: 'white', }, '&:hover fieldset': { borderColor: '#356E44', }, '&.Mui-focused fieldset': { borderColor: 'gray', }, }, }, })(TextField);Cualquier ayuda o sugerencia sería realmente apreciada.
2 Respuestas
Responde la pregunta0
Creo que debería poder agregar un nombre de clase al componente a medida que lo usa.
<TextField className="custom-class">some text</TextField>Luego solo ajusta el css como lo necesites. p.ej
.custom-class .MuiOutlinedInput-root fieldset { borderColor: white; }Ver más en los documentos. https://mui.com/customization/how-to-customize/#overriding-styles-with-class-names
0
Gracias por la ayuda, tengo que girar un poco, pero encontré la respuesta, que es la siguiente:
const useStyles = makeStyles (theme => ({ textbox:{ '& .MuiOutlinedInput-root': { color: 'white', border: '1px solid white' } }, }))