How to style a phone number input in React?

Question

I'm using a custom React phone number input field from this link, not sure how to style it to become a bit similar to my other inputs, which you can probably see them in this demo:

Demo

I'm copying the related code in below, I should probably add some styling in here:

            <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}

           />

Code

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>
    );
  }
}

(Thanks! I'm new to React.)

Answer 1

According to the document, you can pass in class names and inline styles as props to each of the elements. It would look something like:

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

Here is my CodeSandbox.