在 Ant Design 中将样式应用于外部库组件

【问题标题】：Applying styling to external library component in AntDesign在 Ant Design 中将样式应用于外部库组件
【发布时间】：2020-09-23 10:55:16
【问题描述】：

目前我正在使用react-phone-input-2 我已经使用类选择器覆盖了一些样式。

我现在的问题是，如何触发条件样式，使其在出错时与普通 Antd Input 组件的行为相似/相同？

我在下面有以下 CodeSandbox。

【问题讨论】：

标签： javascript css reactjs antd

【解决方案1】：

我认为你有两个选择：

不要导入import "react-phone-input-2/lib/bootstrap.css" 并像这样使用您的组件。但在这种情况下，您将看不到标志下拉菜单，因此您需要自己定义此样式，或者直接从 react-phone-input-2/lib/bootstrap.css 复制它们

      <Form.Item
        label="Phone"
        name="mobile"
        rules={[
          {
            required: true,
            message: "Please input your mobile!"
          }
        ]}
      >
        <PhoneInput inputClass="ant-input" specialLabel={false} />
      </Form.Item>

使用我在上面示例中描述的组件，但也导入“react-phone-input-2/lib/bootstrap.css”，并将尝试覆盖类似于 Antd 的样式

【讨论】：