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