Question

我正在使用Material-UI和样式化的组件。我遇到了一种情况，我想使用基于传递的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};
    `}
`;

但是，它抱怨无法将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严格模式，但它抱怨：

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

如何自定义Material-UI和样式化组件基于道具的样式

1 个答案: