I have a component where I am trying to dynamically change the color based on the user type. The issue arises when I use gradient colors, as the transition stops working. If I stick to simple colors like blue, red, or green, it works fine. Currently, the colors change but without the smooth transition effect. How can this be resolved?
const Dashboard: 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.userType === 'admin' ? hexAdminArr[0] : hexUserArr[0],
transition: 'background 10s ease',
}}
>
</div>
);
};
export default Dashboard;