Issue with className prop passing with Styled Components

[jamesmosier]

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!

[BrianMitchL]

I am also getting this warning. How were you able to suppress it? I don't see any supressClassNameWarning in your codesandbox example.

[jamesmosier]

Hi @BrianMitchL, I didn't include it in the example because I didn't want to show my workaround, rather the issue. But if you put suppressClassNameWarning on the StyledPopover component, that'll hide the warning:

<StyledPopover content={<InnerComponent />} suppressClassNameWarning>

[BrianMitchL]

Fair! Hmm, I get an error from the wrapped Tippy when trying that:

Error: [tippy]: `suppressClassNameWarning` is not a valid option`

[jamesmosier]

Oops, sorry @BrianMitchL, here is a forked codesandbox with it working. You have to exclude suppressClassNameWarning from being passed into Tippy. So inside Tippy.js I pass all props except for that.

[BrianMitchL]

Oh, of course, thanks!

[atomiks]

Sorry for not checking this one earlier.

Edit: The supress warning is probably the only solution. styled-components/styled-components#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
})``;

[atomiks]

I guess if you want this fixed, feel free to make some noise in the styled-components issue I linked