如何在 React 中更改 InputBase 的占位符字体/颜色？

Question

I tried to do it with useStyles. I have the following code:

// 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>
  );
}

However, my placeholder size and color never change even after changing the values in useStyles.. It stays grey and the same size.

Answer 1

You forgot to call the function.

// 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]);