La tarea es usar el campo de entrada delineado de Material UI (componente TextField de "@material-ui/core": "^4.12.2", ) y diseñarlo con un color azul personalizado.

Esto es lo que logré lograr:

Anulación del tema actual para InputLabel:

 import { createTheme } from "@material-ui/core/styles"; export const muiTheme = createTheme({ overrides: { MuiInputLabel: { outlined: { "&$focused": { color: "#3f3fa0", }, }, }, }, },

La anulación del tema general anterior ayuda a cambiar el color de la etiqueta ("Dirección de correo electrónico") a azul. El color border-color azul se logra envolviendo TextField en un componente con estilo con el siguiente CSS:

 import styled from "styled-components"; import { TextField } from "@material-ui/core"; export const CustomTextField = styled(TextField)` .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #3f3fa0; } `;

Renderizo el componente anterior de esta manera (dentro de ThemeProvider ):

 <CustomTextField variant="outlined" label={label} />

Esta solución hacky funciona, como se ve en la imagen que proporcioné arriba, sin embargo, a veces el código Mui decide agregar números aleatorios a sus nombres de clase y esto hace que mi solución CSS personalizada (hacky) falle y termina luciendo así:

Traté de agregar casi cualquier combinación que se me ocurriera al objeto de anulaciones de Mui para anular la propiedad border-color pero no pude resolverlo. ¿Puede usted ayudar?