将 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>`

• 无需将内容包装在更多跨度、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);很有帮助。