Color de subrayado del componente de entrada Material-UI

Recuerda que en las ciencias un problema casi siempre tiene diferentes soluciones, por lo tanto aquí te compartimos lo más óptimo y eficiente.

Solución:

Eché un vistazo al código fuente y están haciendo algo como esto

{
   focused: ,
   disabled: ,
   error: ,
   underline: 
    '&:before': 
        borderBottom: '1px solid rgba(255, 133, 51, 0.42)'
    ,
    '&:after': 
        borderBottom: `2px solid $theme.palette.secondary.main`
    ,
    '&:hover:not($disabled):not($focused):not($error):before': 
        borderBottom: `2px solid $theme.palette.secondary.main`
    

Esto funciona para mi.

Inspirado por la respuesta de Guillaume, aquí está mi código de trabajo, simplificado si no te importa el estado de error:

const WhiteTextField = withStyles(
  root: 
    '& .MuiInputBase-input': 
      color: '#fff', // Text color
    ,
    '& .MuiInput-underline:before': 
      borderBottomColor: '#fff8', // Semi-transparent underline
    ,
    '& .MuiInput-underline:hover:before': 
      borderBottomColor: '#fff', // Solid underline on hover
    ,
    '& .MuiInput-underline:after': 
      borderBottomColor: '#fff', // Solid underline on focus
    ,
  ,
)(TextField);

Usar:

Te mostramos las comentarios y valoraciones de los lectores

Puedes sustentar nuestra ocupación ejecutando un comentario y dejando una puntuación te lo agradecemos.

---

---

Utiliza Nuestro Buscador