CSS Transition in MaterialUI

Question

I'm trying to implement a MaterialUI theme throughout my app. So far I have this and everything but the transition property is working correctly. Chrome DevTools show the property active but there is no background transition on hover. Clearly I'm not looking in the right places as I can't find this topic discussed anywhere.

import { createMuiTheme } from '@material-ui/core/styles';
import blueGrey from '@material-ui/core/colors/blueGrey';

const primaryStop0 = blueGrey[500]
const primaryStop1 = blueGrey[900]

export const theme = createMuiTheme({
    overrides: {
        MuiButton: {
            root: {
                fontWeight: 'bold',
                margin: '50px'
            },
            containedPrimary: {
                background: `linear-gradient(to right,${primaryStop0},${primaryStop1})`,
                transition: 'background 0.2s ease',
                '&:hover': {
                    background: `linear-gradient(to left,${primaryStop0},${primaryStop1})`
                }
            }
        }
    } 
})

first of all did you try using static values for the css and it worked ? — Aly Abd El Rahman, Aug 13 '20 at 22:20

score 0 · Answer 1 · answered Aug 14 '20 at 16:19

0

As it turns out this is a CSS limitation not MaterialUI. No support for linear-gradient transitions.

Use CSS3 transitions with gradient backgrounds

answered Aug 14 '20 at 16:19

Simon Sikorski

21
4

CSS Transition in MaterialUI

1 Answers1