Material-ui: Integrating with React-Spring is cumbersome

Created on 22 Oct 2019  路  3Comments  路  Source: mui-org/material-ui


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!

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 馃挕

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 */}

{/* Example */}


);
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

<!--
  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?

support

Most helpful comment

Tip: const AnimatedTypography = animated(Typography);

All 3 comments

馃憢 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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mattmiddlesworth picture mattmiddlesworth  路  3Comments

revskill10 picture revskill10  路  3Comments

iamzhouyi picture iamzhouyi  路  3Comments

finaiized picture finaiized  路  3Comments

sys13 picture sys13  路  3Comments