在AntDesign中对外部库组件应用样式

Question

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

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

我有下面的CodeSandbox。

​

​

Answer 1

我想你有两个选择：

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>

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