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

Posted 2023-02-22

【中文标题】如何在 React 中设置电话号码输入样式？

【英文标题】：How to style a phone number input in React?

【发布时间】：2020-06-26 10:55:14

【问题描述】：

我正在使用自定义 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 新手。）

【问题讨论】：

使用 CSS 吗？您是要 CSS 表格，还是要如何设置 React 组件的样式？这里的代码中有很多不相关的噪音。

一定是这个：npmjs.com/package/react-phone-input-2#style

【参考方案1】：

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

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

这是我的CodeSandbox。