如何让react-phone-input-2适配MUI应用的主题样式？

下面给你两个实用的方法，让电话输入框和其他MUI输入组件风格统一：

方法1：自定义样式覆盖（结合MUI主题变量） #

react-phone-input-2支持通过inputClass、containerClass等props自定义类名，你可以借助MUI的makeStyles或styled，直接引用主题里的样式变量来覆盖组件默认样式：

import { makeStyles, ThemeProvider } from '@mui/material/styles';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

const useStyles = makeStyles((theme) => ({
  phoneContainer: {
    width: '100%',
    marginBottom: theme.spacing(2),
  },
  phoneInput: {
    width: '100%',
    padding: theme.spacing(1, 1.5),
    fontSize: theme.typography.body1.fontSize,
    border: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700]}`,
    borderRadius: theme.shape.borderRadius,
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.text.primary,
    '&:focus': {
      outline: 'none',
      borderColor: theme.palette.primary.main,
      boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`,
    },
    '&.error': {
      borderColor: theme.palette.error.main,
    },
  },
}));

function PhoneInputWithTheme() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <PhoneInput
        containerClass={classes.phoneContainer}
        inputClass={classes.phoneInput}
        inputProps={{
          name: "phone",
          required: true,
        }}
        country="us"
        countryCodeEditable={false}
      />
    </ThemeProvider>
  );
}

方法2：嵌入MUI TextField组件 #

把react-phone-input-2作为TextField的自定义输入组件，直接复用TextField的主题样式，这是最省心的方式：

import { TextField, ThemeProvider } from '@mui/material';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';

function PhoneInputWithTextField() {
  return (
    <ThemeProvider theme={theme}>
      <TextField
        label="手机号"
        required
        size="small"
        fullWidth
        InputProps={{
          inputComponent: (props) => (
            <PhoneInput
              {...props}
              country="us"
              countryCodeEditable={false}
              disableStyles
            />
          ),
        }}
      />
    </ThemeProvider>
  );
}

关键点说明 #

• 方法1适合需要精细控制样式的场景，所有样式都和MUI主题变量绑定，切换明暗模式时会自动适配。
• 方法2必须加上disableStyles属性，让react-phone-input-2放弃自身默认样式，完全继承TextField的主题样式，和其他输入框风格完全一致。

内容的提问来源于stack exchange，提问作者Alfred Madere