Traté de hacerlo con useStyles. Tengo el siguiente código:
// imports above here const useStyles = makeStyles((theme) => ({ placeholder: { color: 'black', fontSize: 'large', }, })); export default function Chatbox() { const classes = useStyles; const {currentChannel} = React.useContext(globalContext); const [placeholder, setPlaceholder] = React.useState('Message ' + Object.values({currentChannel})[0]); useEffect(() => { setPlaceholder('Message ' + Object.values({currentChannel})[0]); }, [currentChannel]); return ( <Paper component="form" sx={{ p: '4px 8px', display: 'flex', alignItems: 'center', flexShrink: 1, width: 1670}}> <InputBase sx={{ml: 4, flex: 1}} placeholder={placeholder} inputProps={{'aria-label': 'chatbox'}} className= {classes.placeholder} /> <Divider sx={{height: 48, m: 0.5}} orientation="vertical" /> <IconButton sx={{p: '25px'}} aria-label="send"> <SendIcon /> </IconButton> </Paper> ); }Sin embargo, el tamaño y el color de mi marcador de posición nunca cambian incluso después de cambiar los valores en useStyles. Permanece gris y del mismo tamaño.
Olvidaste llamar a la función.
// imports above here const useStyles = makeStyles((theme) => ({ placeholder: { color: 'black', fontSize: 'large', }, })); export default function Chatbox() { const classes = useStyles(); // <--------- Here const {currentChannel} = React.useContext(globalContext); const [placeholder, setPlaceholder] = React.useState('Message ' + Object.values({currentChannel})[0]); useEffect(() => { setPlaceholder('Message ' + Object.values({currentChannel})[0]); }, [currentChannel]);