Cannot override styles with styled component in react-phone-input-2

Question

Styles can be overridden with additional CSS file imported but not with the styled component. Why?

import React from "react";
import styled from "styled-components/macro";

import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";

const Phone = styled(PhoneInput)`
  #phone-input {
    background: red !important;
  }
`;

function InputMobile({value}) {
  function change(value) {
     ...
  }
  return (
    <Phone
      country={"us"}
      inputProps={{
        id: "phone-input"
      }}
      value={value}
      onChange={change}
    />
  );
}
export default InputMobile;

Such properties as dropdownStyle, inputStyle are not enough for me as I also need to style .arrow in .selected-flag

Answer 1

To use styled-component with custom component you need to wrap it. Example:

const Wrapper = ({ className, ...props }) => (
  <div className={className}>
    <PhoneInput {...props} />
  </div>
);

You can test it live: