将 Material-UI 组件与 React-Spring 动画库集成

Question

您可以在这里找到图书馆：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>`

无需将内容包装在更多 span、div 等中，专家们有什么建议？
有人建议const AnimatedTypography = animated(Typography);但对我没用

Answer 1


        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);

事实上，这个建议 const AnimatedTypography = animated(Typography); 很有用。

将 Material-UI 组件与 React-Spring 动画库集成

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

reactjs

material-ui

react-spring