CSS transitions do not work with React MUI objects

Question

I set the height of a MUI Box object with state variables, and it perfectly works: as soon as the states change, the size changes accordingly.

Now I want to make smooth transitions of the height. I've set a CSS file according to recommandations, and I use a className on the Box.

The CSS styling is working (the "background-color" is prefectly applied). But : no transition ever happens. Height changes as before, instantaneous.

I've tried many workarounds : define the transition in the style of the Box, or in the sx, but it does not work either.

I've even tried to use react-transition-group, but the result still is the same: everything works perfectly, the Box format changes, but the transitions do not happen and everything is instantaneous.

Help :)

My code :

import "./style.css"
(...)

  function VisibleSpotsFeedBox() {
    return(
    <Box  
      className='mypaperclass'
      sx={{
        display : "flex", 
        flexDirection : "column", 
        position:"fixed", 
        bottom: { xs:55, sm:65, md:65}, 
        left : 0, 
        right : 0, 
        borderTopLeftRadius : 20, 
        borderTopRightRadius : 20,
        height: (visibleSpotsState.displayFeed ? 300-(touchPosition.current - touchPosition.start) : 50-(touchPosition.current - touchPosition.start))
      }}
    >
    (...)
    </Box> 
    )
  }

CSS :

.mypaperclass {
    background-color : #9ACD32;
    transition: height 3s linear;
  }

Answer 1

Have you tried keyframes instead of transitions? Like-

.mypaperclass {
    background-color : #9ACD32;
    animation: open 1000ms;
  }

@keyframes open {
  0% {
    height: 0px;
  }
}