如何在 React 中设置电话号码输入样式？

Question

我正在使用自定义 React 电话号码输入字段 from this link，不知道如何设置它的样式以使其与我的其他输入有点相似，您可能可以在此演示中看到它们：

Demo

我正在复制下面的相关代码，我应该在这里添加一些样式：

            <PhoneInput
              name = "phoneNumber"
              type = "text"
              country={'us'}
              enableAreaCodes={true}
              onlyCountries={['us']}
              areaCodes={{us: ['999']}}
              inputProps={{
                name: 'phone',
                country:'us',
                required: true,
                autoFocus: true
              }}
              value={this.state.phone}
              onChange={this.handleOnChange}

           />

代码

import React, {useState} from 'react'
import {
  Form,
  Field
} from 'react-advanced-form'
import {
  Input,
  Button
} from 'react-advanced-form-addons'
// import 'react-phone-number-input/style.css'
// import PhoneInput from 'react-phone-number-input'
import PhoneInput from 'react-phone-input-2'
import 'react-phone-input-2/lib/style.css'


export default class RegistrationForm extends React.Component {
  registerUser = ({
    serialized,
    fields,
    form
  }) => {
    return fetch('https://backend.dev', {
      body: JSON.stringify(serialized)
    })
  }


  state = { phone: "" };

  handleOnChange = value => {
    console.log(value);
    this.setState({ phone: value }, () => {
      console.log(this.state.phone);
    });
  };

  handleAgreementCheckbox = () => {
      const currentTime = new Date();
      const eligibleUserDOB = new Date(currentTime.getFullYear() - 18, currentTime.getMonth(), currentTime.getDate());
      return currentTime>= eligibleUserDOB;
  };

  render() {
    return (
      <section className = "container">
        <Form action = {
          this.registerUser
        }
        onSubmitStart = {
          this.props.onSubmitStart
        }>
            <Input name = "firstName"
            label = "First name"
            required = {
              ({
                get
              }) => {
                return !!get(['lastName', 'value'])
              }
            }/>
            <Input name = "lastName"
            label = "Last name"
            required = {
              ({
                get
              }) => {
                return !!get(['firstName', 'value'])
              }
            }
            />

            <Input name = "emailAddress"
            type = "email"
            label = "Email Address"
            required />


            <PhoneInput
              name = "phoneNumber"
              type = "text"
              country={'us'}
              enableAreaCodes={true}
              onlyCountries={['us']}
              areaCodes={{us: ['999']}}
              inputProps={{
                name: 'phone',
                country:'us',
                required: true,
                autoFocus: true
              }}
              value={this.state.phone}
              onChange={this.handleOnChange}

            required/>


            <Input name = "dateOfBirth"
            type = "date"
            label = "Date of Birth"
            required />

            <Input name = "eligibleAge"
            type = "checkbox"
            label = "I agree"
            value = "unchecked"
            />
          <Button primary> Submit </Button>
        </Form>
      </section>
    );
  }
}

（谢谢！我是 React 新手。）

Answer 1

根据document，您可以将类名和内联样式作为道具传递给每个元素。它看起来像：

<PhoneInput
  ...
  containerClass="my-container-class"
  inputClass="my-input-class"
  containerStyle={{
    border: "10px solid black"
  }}
  inputStyle={{
    background: "lightblue"
  }}
/>

这是我的CodeSandbox。