使用 Material UI 在 React 上使用 useState 更改颜色答案

【问题标题】：Change color using useState on React using Material UI使用 Material UI 在 React 上使用 useState 更改颜色
【发布时间】：2020-12-27 04:23:10
【问题描述】：

我喜欢使用useState通过点击图标来改变图标的颜色，我在图标上添加了一个点击处理程序。

这是我的代码：

import React, { useState } from 'react';
import './App.css';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';

function App() {

  const[likeColor, setLikeColor] = useState('');

  const colorStyle = {color:"blue"}

  const handleClick = () => {
      const color = likeColor ? '' : colorStyle;
      setLikeColor(color);
  }


  return (
    <div className="App">
      <ThumbUpIcon onClick={handleClick} style={{likeColor}}></ThumbUpIcon>
    </div>
  );
}

export default App;

【问题讨论】：

问题是您将字符串传递给样式，但样式需要一个对象style={{likeColor}}。尝试在那里对颜色值进行硬编码以确保它有效。你可能想要style={{color: likeColor}}

标签： javascript reactjs material-ui react-hooks use-state

【解决方案1】：

你有一个对象内部的对象，我会尝试：

<ThumbUpIcon onClick={handleClick} style={likeColor}></ThumbUpIcon>

查看style属性的区别。

【讨论】：

【解决方案2】：

有问题“道具样式必须是对象（css概念），所以它应该style={likeColor}”。顺便说一句，您应该初始化值 likeColor 是一个对象而不是空字符串。所以，我建议你应该改变颜色工作的方式。

函数 App() {

const[isLike, setIsLike] = useState(false);

const colorStyle = {color:"blue"}

const handleClick = () => {
    setIsLike(!isLike);
}

return (
    <div className="App">
        <ThumbUpIcon onClick={handleClick} style={isLike ? colorStyle : null}></ThumbUpIcon>
    </div>
);

}

【讨论】：

请不要忘记投票并接受我的回答:)))