如何自定义 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 组件包装到一个函数组件中，该函数组件基本上接受该附加道具并将其余部分传递给 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};
    `}
`;

然而，它随后抱怨无法将引用传递给功能组件。

最后，我把它全部包起来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

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

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

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

Answer 1

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

所以问题绝对不是由样式组件组合引起的： https: //codesandbox.io/s/objective-darkness-k7uss