css - 通过多个组件转发 refs

Question

我正在为应用程序使用 Material-UI 和 styled-components，并且我正在尝试将 ref 向下传递到<button>MUI 创建的根节点。MUI 有一个buttonRef用于访问它的道具，所以这很简单，但是我使用 styled-components 来设置 MUI 的 Button 组件的样式，如下所示：

const NavButtonMain = styled(Button)`
    ...
`

我也已经在该按钮的样式中非常依赖动态 CSS，这就是为什么我不能只使用常规 CSS 样式表并直接访问 MUI 的 Button，例如：

<Button buttonRef={ref} className={plain-old-css}/>

Styled-components 有一个 innerRef 属性...

<NavButtonMain innerRef={ref}/>

..但我不知道如何从那里再往下一层进入按钮。有任何想法吗？

Answer 1

如果有人最近正在寻找解决方案 - 最新文档解释说 material-ui 在引擎盖下转发 ref 属性，所以这绝对足够了：

const myRef = useRef();
...
return <Button ref={ref} {...props} />

Answer 2

您可以简单地将道具作为 on 传递，buttonRef在ComponentNavButtonMain中访问和使用它Button

<NavButtonMain buttonRef={ref}/>

<Button buttonRef={this.props.buttonRef} className={plain-old-css}/>