javascriptreactjsstyled-componentsintl-tel-input

Styled components without support of className property


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?


Solution

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