How to customize Material-UI and styled-components props-based styles

Question

I am using Material-UI and styled-components. I have come across a situation where I want to override the styles of a Material-UI component with styled-components based on a passed prop.

The first thing I tried was simply passing an additional prop to the component exported with styled-component, but React complains that the prop is not defined on a component.

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};
    `}
`;

I have then tried following the examples I saw online where a Material-UI component is wrapped into a function component that basically takes in that additional prop and passes the rest down to the Material-UI component:

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};
    `}
`;

It then, however, complained about not being able to pass refs to the functional components.

Finally, I wrapped it all inside 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};
    `}
`;

It seems to be working, but I use React strict mode and it complains:

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

I can disable the Strict mode, but I would rather find out if and what I am doing wrong.

I believe an important part of why I am getting this error is due to wrapping the above component into the Tooltip component from Material-UI.

Any help will be appreciated! Thanks!

Try making a sandbox example codesandbox.io, there is so much inline code going here it's hard to follow (for me) — Dennis Vash

OriginalEXE OriginalEXE · Accepted Answer · 2019-09-15T21:12:32

It looks like the issue is actually known in the Material-UI library: https://github.com/mui-org/material-ui/issues/13394

So the problem is definitely not caused by the styled-components combo: https://codesandbox.io/s/objective-darkness-k7uss

How to customize Material-UI and styled-components props-based styles

1 Answers