reactjs - 如何自定义 Material-UI 和 styled-components 基于 props 的样式

Question

我正在使用 Material-UI 和 styled-components。我遇到过一种情况，我想使用基于传递的 prop 的样式组件来覆盖 Material-UI 组件的样式。

我尝试的第一件事是简单地将一个额外的 prop 传递给使用 styled-component 导出的组件，但是 React 提示该 prop 没有在组件上定义。

export const AppMenuItemButton = styled(
  React.forwardRef(({ active, ...rest }, ref) => <IconButton {...rest} />),
)`
  background-color: hsla(0, 0%, 0%, 0.4);
  border-radius: 50%;
  border: 2px solid hsl(0, 0%, 15%);

  ${props =>
    props.itemActive &&
    css`
      border-color: ${theme.palette.primary.light};
    `}
`;

然后我尝试遵循我在网上看到的示例，其中一个 Material-UI 组件被包装到一个函数组件中，该组件基本上接受该附加 Prop 并将其余部分传递给 Material-UI 组件:

export const AppMenuItemButton = styled(
  ({ active, ...rest }) => <IconButton {...rest} />,
)`
  background-color: hsla(0, 0%, 0%, 0.4);
  border-radius: 50%;
  border: 2px solid hsl(0, 0%, 15%);

  ${props =>
    props.itemActive &&
    css`
      border-color: ${theme.palette.primary.light};
    `}
`;

然而，它随后提示无法将 refs 传递给功能组件。

最后，我把它全部包裹在里面 React.forwardRef :

export const AppMenuItemButton = styled(
  React.forwardRef(({ active, ...rest }, ref) => <IconButton {...rest} />),
)`
  background-color: hsla(0, 0%, 0%, 0.4);
  border-radius: 50%;
  border: 2px solid hsl(0, 0%, 15%);

  ${props =>
    props.itemActive &&
    css`
      border-color: ${theme.palette.primary.light};
    `}
`;

它似乎有效，但我使用 React 严格模式并且它提示:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

    in div (created by Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by ForwardRef(Popper))
    in div (created by ForwardRef(Popper))
    in ForwardRef(Portal) (created by ForwardRef(Popper))
    in ForwardRef(Popper) (created by Tooltip)
    in Tooltip (created by WithStyles(Tooltip))
    in WithStyles(Tooltip) (created by wrappedComponent)
    in li (created by Context.Consumer)
    in StyledComponent (created by AppMenucss__AppMenuItem)
    in AppMenucss__AppMenuItem (created by wrappedComponent)
    in ul (created by Context.Consumer)
    in StyledComponent (created by AppMenucss__AppMenuItems)
    in AppMenucss__AppMenuItems (created by wrappedComponent)
    in nav (created by Context.Consumer)
    in StyledComponent (created by AppMenucss__AppMenu)
    in AppMenucss__AppMenu (created by wrappedComponent)
    in wrappedComponent (created by wrappedComponent)
    in section (created by Context.Consumer)
    in StyledComponent (created by Layoutcss__MenuContainer)
    in Layoutcss__MenuContainer (created by wrappedComponent)
    in main (created by Context.Consumer)
    in StyledComponent (created by Layoutcss__Layout)
    in Layoutcss__Layout (created by wrappedComponent)
    in wrappedComponent (created by wrappedComponent)
    in StoreProvider (created by wrappedComponent)
    in ThemeProvider (created by wrappedComponent)
    in StylesProvider (created by wrappedComponent)
    in StrictMode (created by wrappedComponent)
    in wrappedComponent (created by HotExportedComponent)
    in AppContainer (created by HotExportedComponent)
    in HotExportedComponent

我可以禁用严格模式，但我宁愿找出我是否做错以及做错了什么。

我相信我收到此错误的一个重要部分是由于将上述组件包装到 Tooltip 中。来自 Material-UI 的组件。

任何帮助将不胜感激!谢谢!

Answer 1

看起来这个问题实际上在 Material-UI 库中是已知的:https://github.com/mui-org/material-ui/issues/13394

所以问题肯定不是由 styled-components 组合引起的:https://codesandbox.io/s/objective-darkness-k7uss