How to transition mui background color string?-CodePudding

I have the following component where I want to change the color depending on user type , issue is when I use gradient ... the color get stops from transitioning , if I use simple colors like bule , red , green .... then it works but at the current state in code the colors changes but whiteout the slowed transition ... how to solve this ?

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;

CodePudding user response：

It's how React works, you should rewrite following lines

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

with React.useState hook

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

CodePudding user response：

Or if first answer didn't work, look here, that is how I dealt mine:

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