无法在 react-phone-input-2 中使用带样式的组件覆盖样式

Question

可以使用导入的其他 CSS 文件覆盖样式，但不能使用带样式的组件。为什么？

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;

dropdownStyle、inputStyle 等属性对我来说还不够，因为我还需要在 .selected-flag 中设置 .arrow 的样式

Answer 1

要将 styled-component 与自定义组件一起使用，您需要对其进行包装。示例：

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

您可以现场测试：

无法在 react-phone-input-2 中使用带样式的组件覆盖样式

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

reactjs

styled-components