I was trying to integrate the Material-UI components with the React-Spring animation library.
You can find it here: https://www.react-spring.io/
When I try to use any imported Material-UI component to a spring component, for example:
<animated.Typography>Example</animated.Typography>
I am no longer rendering the imported Material-UI element so React complains.
This forces me to add inline elements that will create turmoil in my code.
Am I missing a secret better way to do this?
Above all, I'm very grateful and proud of such an amazing job for each and every one of you in creating my favorite React library!
If I try to do something like:
```
will produce an ERROR because we are not rendering the imported element
<!-- Describe how it should work. -->
## Examples 馃寛
Please here's a code sandbox: https://codesandbox.io/s/material-ui-vs-react-spring-2mi6k
Also, a simple demo code of what I am trying to accomplish from the same sandbox:
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 (
{/* UNCOMMENT THE LINE BELOW AND SEE */}
{/*
const rootElement = document.getElementById("root");
ReactDOM.render(
<!--
Provide a link to the Material design specification, other implementations,
or screenshots of the expected behavior.
-->
## Motivation 馃敠
I would love if I could do something like:
```
without having to wrap things in more spans,divs,etc.
What do you experts recommend?
馃憢 Thanks for using Material-UI!
We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.
For support, please check out https://material-ui.com/getting-started/support/. Thanks!
If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
Tip: const AnimatedTypography = animated(Typography);
Thanks @oliviertassinari
Most helpful comment
Tip:
const AnimatedTypography = animated(Typography);