如何在React中使用TypeScript将ref添加到Material-UI Box组件中?这很重要,因为这样可以允许动画库(如GreenSock / GSAP)对节点进行动画处理。根据Material-UI文档,使用itemRef将无法正常工作,因为它需要使用findDOMNode,而在严格模式下(用于并发React的准备),它已被弃用,并且由于虚拟DOM渲染,进一步可能会出现故障。
// 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。 我们不得不使用 emotion 替代 styled-components,因为 styled-components 会产生动画闪烁问题。