MUI React：聚焦Select时隐藏TextField外边框问题求助

我尝试将两个MUI输入框放在同一标签下创建自定义字段，用TextField作为容器包裹字段实现了需求，但出现边框异常问题：

• 未聚焦时显示正常：
• 聚焦TextField时边框显示正常：
• 聚焦Select字段时出现异常：

可见当Select聚焦时，TextField的外边框不该显示却显现出来了，求解决：如何在Select字段聚焦时隐藏TextField的外边框？

解决方法 #

方式一：用styled组件结合CSS :has()选择器

通过自定义样式，监听内部Select的聚焦状态，动态隐藏外层TextField的边框：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const StyledTextField = styled(TextField)(({ theme }) => ({
  '&:has(.MuiSelect-focused) .MuiOutlinedInput-notchedOutline': {
    border: 'none',
    boxShadow: 'none',
  },
}));

之后用StyledTextField替换原有的外层TextField容器即可。

方式二：通过状态控制样式（兼容旧浏览器）

给Select绑定聚焦/失焦事件，维护状态标记Select的聚焦状态，再根据状态控制外层TextField的边框：

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import Select from '@mui/material/Select';

const CustomField = () => {
  const [selectIsFocused, setSelectIsFocused] = useState(false);

  return (
    <TextField
      InputProps={{
        sx: {
          '& .MuiOutlinedInput-notchedOutline': {
            border: selectIsFocused ? 'none' : undefined,
            boxShadow: selectIsFocused ? 'none' : undefined,
          },
        },
      }}
      // 其他属性
    >
      <Select
        onFocus={() => setSelectIsFocused(true)}
        onBlur={() => setSelectIsFocused(false)}
        // 其他属性
      >
        {/* 下拉选项 */}
      </Select>
      {/* 另一个输入框 */}
    </TextField>
  );
};

如果需要兼容不支持:has()选择器的旧浏览器，优先选择第二种状态控制的方案。

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