如何转换mui背景颜色字符串？答案

【问题标题】：How to transition mui background color string?如何转换mui背景颜色字符串？
【发布时间】：2022-11-23 18:51:06
【问题描述】：

我有以下组件，我想根据用户类型更改颜色，问题是当我使用渐变时...颜色停止过渡，如果我使用简单的颜色，如蓝色、红色、绿色....然后它有效，但在代码的当前状态下，颜色会发生变化，但会遮挡缓慢的过渡……如何解决这个问题？

const Home: React.FC = () => {
  const _authContext = useContext(authContext);
  
  const hexUserArr = ['linear-gradient(360deg, #fe6b8b 30%, #7DF9FF 70%)'];
  const hexAdminArr = ['linear-gradient(360deg, #dfe566 30%, #7DF334 70%)'];

  return (
      <div
        style={{
          minHeight: '100vh',
          marginTop: 0,
          marginBottom: -50,
          justifyContent: 'center',
          background: _authContext.starterUserType === 'admin' ? hexAdminArr[0] : hexUserArr[0],
          transition: 'background 10s ease',
        }}
      >
      </div>
   
  );
};

export default Home;

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

这就是 React 的工作方式，你应该重写以下几行

const hexUserArr = ['linear-gradient(360deg, #fe6b8b 30%, #7DF9FF 70%)'];
const hexAdminArr = ['linear-gradient(360deg, #dfe566 30%, #7DF334 70%)'];

和React.useState 钩子

const [hexUserArr, setHexUserArr] = React.useState([...])

【讨论】：

【解决方案2】：

或者，如果第一个答案不起作用，请看这里，这就是我处理我的方式：

const getStyle = () => {
        if(user !== null)
        {
            const deg = -135 + Math.round(360 * user.vacationsNum / defaultNumVacations / 15) * 15;

            return { 
                    ROTATE: deg
            }
        }
    }

const PROGRESS_LAYER = user ? {
        width: "5rem",
        height: "5rem",
        transform: `rotate(${getStyle().ROTATE}deg)`
    } : "";

return (
     <div style={PROGRESS_LAYER} />
)

【讨论】：