No hay orientación sobre cómo cambiar el color del texto de estas entradas https://material-ui-next.com/demos/text-fields/
¿Solo usamos CSS externo para hacer esto?
También probé esto pero no pasa las comprobaciones de TypeScript:
<TextField
inputProps={{ style: { fontFamily: 'Arial', color: 'white'}}}
style={{ flex: 1, margin: '0 20px 0 0', color: 'white'}}
onChange={(e: ChangeEvent<HTMLInputElement>) => changeSearch(e.target.value)}
type="text"
value={reducerState.search}
/>
(50,11): error TS2339: Property 'inputProps' does not exist on type 'IntrinsicAttributes & TextFieldProps & { children?: ReactNode; }'.
Esto podría ser puramente un problema de tipos de TypeScript
Lo acabo de hacer con CSS externo
.something input {
color: white;
}
@QuantumInformation Me alegra que hayas encontrado una solución. Animaría a la gente a hacerlo de esta manera:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const styles = {
root: {
background: "black"
},
input: {
color: "white"
}
};
function CustomizedInputs(props) {
const { classes } = props;
return (
<TextField
defaultValue="color"
className={classes.root}
InputProps={{
className: classes.input
}}
/>
);
}
CustomizedInputs.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(CustomizedInputs);
https://codesandbox.io/s/1370v7y4zj
Tenga en cuenta que también puede apuntar a los nombres de clases globales ( .MuiInputBase-root
y .MuiInputBase-input
).
No funciona en "@material-ui/core"
Alguna actualización, ¿cómo hacer que funcione con @material-ui/core
? Estoy muy atascado en esto
@pankajparkar He actualizado mi respuesta anterior para trabajar con la última versión: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532. Espero que te ayude, ¡avísame! Alternativamente, tenemos una demostración de personalización en https://material-ui.com/demos/text-fields/#customized -inputs.
@oliviertassinari muchas gracias. Tuve que eliminar label
para que funcionara.
¿Tiene alguna solución / solución alternativa para que funcione con label. Entiendo por qué la etiqueta se superpone (la ordené parcialmente aplicando z-index
, pero eso me llevó a diferentes problemas).
Problema codepen aquí
muchas gracias
Dang, nunca me di cuenta de lo impopular que era mi respuesta inicial
@oliviertassinari muchas gracias. Tuve que eliminar
label
para que funcionara.
¿Tiene alguna solución / solución alternativa para que funcione con label. Entiendo por qué la etiqueta se superpone (la ordené parcialmente aplicandoz-index
, pero eso me llevó a diferentes problemas).Problema codepen aquí
¡También necesito exactamente lo mismo!
Comentario más útil
@QuantumInformation Me alegra que hayas encontrado una solución. Animaría a la gente a hacerlo de esta manera:
https://codesandbox.io/s/1370v7y4zj
Tenga en cuenta que también puede apuntar a los nombres de clases globales (
.MuiInputBase-root
y.MuiInputBase-input
).