无法使用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>
);

您可以现场测试：

Answer 2

对我来说这工作正常。

风格：

import styled from "@emotion/styled";
import PhoneInput from "react-phone-input-2";

export const StyledPhoneInput2 = styled(PhoneInput)`
  width: 100%;
  border-radius: 8px;
`

还可以在浏览器中查找内部类，并根据需要覆盖它们：

export const StyledPhoneInput2 = styled(PhoneInput)`
  width: 100%;
  border-radius: 8px;
    
  &.react-tel-input .form-control {}
              
  &.react-tel-input .flag-dropdown {} 
`

然后在组件中使用它：

import { StyledPhoneInput } from "./your-name.styles";

<StyledPhoneInput/>