Issue with className prop passing with Styled Components

Thanks for a great project! Is there any insight into this warning I receive from styled-components when using it with Tippy React?

It looks like you've wrapped styled() around your React component (Popover), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

Here is a codesandbox with the warning. Oddly enough, the example works as expected. I am wrapping the <Tippy /> component in a styled-component and that in turn styles the .tippy-tooltip element.

The warning is due to the fact I am passing in a custom component for content but my custom component is not receiving the props from styled-components (but I don’t need it to).

For now I’m just passing suppressClassNameWarning into StyledPopover (in my example).

Any thoughts would be great! Thanks again!

[atomiks]

Sorry for not checking this one earlier.

Edit: The supress warning is probably the only solution. https://github.com/styled-components/styled-components/issues/2159

I agree with this comment:

I’m really not happy with the need to add another prop just to suppress this warning, and I don’t really view deferred or relocated rendering as an ‘edge case’. I should be able to render the className later, or somewhere else, or not at all. Once the className is handed off, it’s not styled-components’s business how, if, or when I choose to use it.

I’ll just keep this issue open for now

---

If you don’t want to pass supressClassNameWarning every time, you can use this

import React from 'react';
import Tippy from '@tippy.js/react';
import styled from 'styled-components';

export default styled(({ suppressClassNameWarning, ...props }) => (
  <Tippy {...props} />
)).attrs({
  suppressClassNameWarning: true
})``;

[BrianMitchL]

Oh, of course, thanks!