Typescript / React：如何将ref添加到material-ui Box组件？

Question

如何使用TypeScript将ref添加到React的material-ui Box组件中？这对于允许动画库（例如GreenSock / GSAP）动画化节点很重要。对于material-ui docs，使用itemRef将不起作用，因为它需要使用findDOMNode，它在严格模式下（并发React的准备工作）已弃用，并且由于虚拟DOM渲染而可能会损坏。

Answer 1

没有将ref与ALL-UI生成的节点]相关联的能力，没有可靠的方法来集成针对特定节点的动画库。

material-ui GitHub项目上有几个相关问题。我在Issue #17010

上发布了一种解决方法，直到material-ui包括向所有生成的节点添加ref的能力为止。

相关问题：

• 如何将引用添加到Box组件？ #19284
• [[Box]允许引用框#19275
• TypeScript定义#17010
中Box缺少ref>

临时解决方法：

// 1. Import style library, either Emotion or Styled-Components
import styled from "@emotion/styled";

// 2. Recreate the Material-UI Box with a styled component
const StyledBox = styled(Box)``;

// 3. Usage in the render
<StyledBox ref={boxRef}>Box Content</StyledBox>
注意：

使用@ material-ui / core / styles不起作用，需要使用emotion或styled-components。 由于样式组件唯一生成的动画闪烁问题，我们被迫对样式组件使用情感。] >>