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

Posted 2023-02-22

【中文标题】如何自定义 Material-UI 和 styled-components 基于 props 的样式

【英文标题】：How to customize Material-UI and styled-components props-based styles

【发布时间】：2020-01-16 14:44:16

【问题描述】：

我正在使用 Material-UI 和 styled-components。我遇到了一种情况，我想根据传递的 prop 用 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;
    `
`;

然后，它抱怨无法将 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

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

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

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

【问题讨论】：

尝试做一个沙盒示例codesandbox.io，这里有太多内联代码，很难理解（对我来说）

【参考方案1】：

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

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