integrate the Material-UI components with the React-Spring animation library

Question

You can find the library here: https://www.react-spring.io/

    import React from "react";
    import ReactDOM from "react-dom";
    import Typography from "@material-ui/core/Typography";
    import { useSpring, animated } from "react-spring";
    
    function App() {
      const props = useSpring({
        opacity: 1,
        from: { opacity: 0 }
      });
      return (
        <div className="App">
          <Typography variant="h2">
            <animated.div style={props}>Example</animated.div>
          </Typography>
    
          {/* UNCOMMENT THE LINE BELOW AND SEE */}
       {/* <animated.Typography variant="h2">Example</animated.Typography> */}
        </div>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

**I would love if I could do something like:**

 `<animated.Typography style={`props`}>Example </animated.Typography>`

without having to wrap things in more spans, divs,etc What do you experts recommend?
somebody suggested const AnimatedTypography = animated(Typography); but it didn't work for me

score 7 · Accepted Answer · edited Aug 15 '21 at 06:08


        import React from "react";
        import ReactDOM from "react-dom";
        import Typography from "@material-ui/core/Typography";
        import { useSpring, animated } from "react-spring";
        
        
        function App() {
          const props = useSpring({
            opacity: 1,
            from: { opacity: 0 }
          });
          const AnimatedTypography = animated(Typography);

          return (
            <div className="App">
              <Typography variant="h2">
                <animated.div style={props}>Example</animated.div>
              </Typography>
        
              {/* THOUGHT I couldn't make it work like this */}
              {/* <animated.Typography variant="h2">Example</animated.Typography> */}
    
             {/* HOWEVER IT WORKED this way which gets the work done. I am very happy now :) */}
            <AnimatedTypography variant="h2" style={props}>Example</AnimatedTypography>
    
            </div>
          );
        }
        
        const rootElement = document.getElementById("root");
        ReactDOM.render(<App />, rootElement);

In fact that suggestion const AnimatedTypography = animated(Typography); turned out to be helpful.

integrate the Material-UI components with the React-Spring animation library

1 Answers1