Como una demostración simple, hice este ejemplo de sandbox de código . Quiero aplicar algunos estilos al componente Cuadro cuando el campo Texto está enfocado. En mi caso de uso, puedo aplicar estilos en el instante de clase del campo de texto del cuadro principal. Pero me pregunto cómo el cuadro principal sabe que un niño está enfocado o no y luego aplica css en consecuencia.
Lo más fácil sería manejar el evento onFocus y onBlur del campo de texto y luego agregar accesorios adicionales al elemento principal cuando el cuadro de texto esté enfocado.
export default function FullWidthTextField() { const [textFieldFocused, setTextFieldFocused] = React.useState(false); const extraProps = textFieldFocused ? { backgroundColor: "orange" } : {}; const sx = { // ... default styles for the box ...extraProps }; return ( <Box sx={sx}> <TextField fullWidth label="fullWidth" id="fullWidth" onFocus={() => setTextFieldFocused(true)} onBlur={() => setTextFieldFocused(false)} /> </Box> ); }Aquí hay una demostración actualizada que muestra esta solución en acción.
Aquí está mi solución con el evento onFocus y los eventos onBlur
import * as React from "react"; import Box from "@mui/material/Box"; import TextField from "@mui/material/TextField"; export default function FullWidthTextField() { const [focus, setFocus] = React.useState(false); const toggle = () => setFocus(!focus); const handleOnFocus = () => { toggle(); }; const handleOnblur = () => { toggle(); }; React.useEffect(() => { console.log(focus); }, [focus]); return ( <Box sx={{ width: focus ? "80%" : "10%", padding: 2, margin: 2, transition: "width 1s ease-in-out", // boxShadow: 3 boxShadow: 21 }} > <TextField fullWidth label="fullWidth" id="fullWidth" onFocus={handleOnFocus} onBlur={handleOnblur} /> </Box> ); }Puedes probar la demo aquí: DEMO