useless className warning

I’m using styled-components to style a rc-tooltip, which takes the property overlayClassName instead of className in order to style the tooltip’s overlay. My code contains a very basic wrapper to map the prop:

const TooltipStyleWrapper = props => {
	const { className, ...rest } = props;
	return <Tooltip overlayClassName={className} {...rest} />;
};

When this component mounts, styled-components issues the className warning:

It looks like you’ve wrapped styled() around your React component (TooltipStyleWrapper), 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.

In truth, I am passing down className, but by a different name. I did a brief search for this issue and saw PR #2156 for adding another prop to suppress this warning.

I don’t think it’s appropriate for styled-components to pry into my components to see how I’m using the provided className, and I really don’t think it’s appropriate that I should have to add another obtuse prop to suppress this warning. The above code already exists as a bridge between sc and rc-tooltip, and I very much don’t want to go to even further lengths to build this bridge. If a warning is going to exist, it should be smart enough only to warn me when something is actually wrong.

[Fer0x]

@probablyup sure, will add this today

[probablyup]

cc @Fer0x - can you add a guard so that each component only emits the warning once? We can do a simple reference equality test using an ES6 Map and set a flag once the warning has gone out once.