无法覆盖带有样式组件的输入-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标志中设置.arrow样式。

Answer 1

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

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

你可以现场测试它：

​

​