Styled components without support of className property

Question

I am using react and styled components and use 3rd party component named IntlTelInput.
My code goes like this:

const StyledIntlTelInput = styled(IntlTelInput)`
    background: blue;
`;

export default function PhoneNumberInput() {
    return (
        <StyledIntlTelInput />
    );
}

IntlTelInput doesn't support className property, but containerClassName. As a result I get the IntlTelInput without blue background.
How can I solve this?

See this: https://stackoverflow.com/questions/53332428/styled-components-is-saying-wrapped-styled-around-your-react-component-compon/53333912#53333912 Just pass the `className` generated by `styled-components` into the `IntlTelInput`'s `containerClassName` property. — Matt Carlotta, Apr 28 '19 at 18:29
The problem gets bigger because the component itself support className from the outside... — Naor, Apr 28 '19 at 20:01

score -1 · Accepted Answer · answered Apr 04 '23 at 10:01

Just add some wrapper component wich translate containerClassName to className.

const MyWrapper = ({ className, ...props }) => (
    return <IntlTelInput containerClassName={className} {...props} />;
);

const StyledIntlTelInput = styled(MyWrapper)`
    background: blue;
`;

Styled components without support of className property

1 Answers1