如何使用Material UI实现带国旗和标签的Outlined风格手机号输入框

直接通过MUI原生组件组合实现，无需改造第三方手机号选择器样式，灵活度更高，可完全匹配Outlined设计规范。

步骤1：安装依赖 #

# 安装国旗组件（也可自行替换为本地国旗图标资源）
npm install react-country-flag
# 若还未安装MUI基础依赖，执行以下命令
npm install @mui/material @emotion/react @emotion/styled

步骤2：核心实现代码 #

import { useState } from 'react';
import { TextField, InputAdornment, Select, MenuItem, Box } from '@mui/material';
import CountryFlag from 'react-country-flag';

// 国家区号配置，可根据业务需求扩展
const COUNTRY_CODES = [
  { code: 'CN', name: '中国', phoneCode: '+86' },
  { code: 'US', name: '美国', phoneCode: '+1' },
  { code: 'GB', name: '英国', phoneCode: '+44' },
  { code: 'JP', name: '日本', phoneCode: '+81' },
];

const PhoneInput = () => {
  const [selectedCountry, setSelectedCountry] = useState(COUNTRY_CODES[0]);
  const [phone, setPhone] = useState('');

  return (
    <TextField
      label="手机号码"
      variant="outlined"
      fullWidth
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      placeholder="请输入手机号码"
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <Select
              value={selectedCountry.code}
              onChange={(e) => {
                const country = COUNTRY_CODES.find(item => item.code === e.target.value);
                setSelectedCountry(country);
              }}
              variant="standard"
              disableUnderline
              sx={{
                mr: 1,
                '& .MuiSelect-select': {
                  display: 'flex',
                  alignItems: 'center',
                  gap: '4px',
                  py: 0.5,
                }
              }}
            >
              {COUNTRY_CODES.map(country => (
                <MenuItem key={country.code} value={country.code}>
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                    <CountryFlag countryCode={country.code} svg style={{ width: 20, height: 15 }} />
                    <span>{country.phoneCode}</span>
                  </Box>
                </MenuItem>
              ))}
            </Select>
          </InputAdornment>
        ),
      }}
    />
  );
};

export default PhoneInput;

关键适配说明 #

• 通过InputAdornment将国家选择器嵌入输入框前缀，完全符合MUI Outlined输入框的设计规范，无需额外修改边框样式
• 国家选择器使用variant="standard" + disableUnderline配置，去掉默认的下划线样式，和输入框整体完全融合
• 内置的label属性会自动适配前缀宽度，不会出现和前缀内容重叠的问题
• 国旗组件可根据项目需求替换为本地的图标资源，减少第三方依赖
• 若需要手机号码格式校验，可搭配libphonenumber-js库，根据选中的国家区号校验输入的号码格式即可

内容的提问来源于stack exchange，提问作者Alex Pryz