Quiero modificar el color de fuente de MUI TextField deshabilitado. Debe ser negro para que sea visible.
Aquí está el código
<TextField fullWidth variant="standard" size="small" id="id" name="name" type="text" InputProps={{disableUnderline: true}} disabled={true} />Eliminé el subrayado para el campo de texto estándar. Ahora quiero el color de texto negro cuando está deshabilitado.
Inspirado en la solución de Madhuri, también puede usar el accesorio sx sin importar el estilo:
<TextField fullWidth variant="standard" size="small" id="id" name="name" type="text" InputProps={{disableUnderline: true}} disabled={true} sx={{ "& .MuiInputBase-input.Mui-disabled": { WebkitTextFillColor: "black", }, }} />Debe usar la clase ".Mui-disabled" para anular el css requerido como se muestra a continuación,
import TextField from "@mui/material/TextField"; import { styled } from "@mui/material/styles"; const CustomDisableInput = styled(TextField)(() => ({ ".MuiInputBase-input.Mui-disabled": { WebkitTextFillColor: "#000", color: "#000" } })); function App() { return ( <> <span>Disabled Input:</span> <CustomDisableInput fullWidth variant="standard" size="small" id="id" name="name" type="text" value="your text" InputProps={{ disableUnderline: true }} disabled={true} /> </> ); }Consulte la demostración aquí: https://codesandbox.io/s/mui-customdisableinput-xl7wv