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

【问题标题】：How do I change my InputBase's placeholder font/color in React?如何在 React 中更改 InputBase 的占位符字体/颜色？
【发布时间】：2021-12-31 14:29:00
【问题描述】：

我尝试使用 useStyles 来做到这一点。我有以下代码：

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

但是，即使更改了 useStyles 中的值，我的占位符大小和颜色也不会改变。它保持灰色和相同的大小。

【问题讨论】：

您在 classes 变量初始化中缺少括号：const classes = useStyles();

标签： javascript reactjs react-hooks

【解决方案1】：

你忘记调用函数了。

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

【讨论】：