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

Question

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;

Answer 1

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([...])

Answer 2

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