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

Question

我使用Material-UI和styled-components。我遇到过这样一种情况，我想用基于传递的属性的样式组件来覆盖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组件被包装到一个函数组件中，该组件基本上接受额外的支持，并将其余的传递给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};
    `}
`;

然而，它抱怨无法将ref传递给功能组件。

最后，我将其全部封装在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 strict模式，它抱怨：

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

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

我相信我得到这个错误的一个重要部分是由于将上面的组件从Material-UI包装到Tooltip组件中。

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

Answer 1

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

所以这个问题肯定不是由样式化组件组合引起的：https://codesandbox.io/s/objective-darkness-k7uss