如何移除React MUI TimePicker输入框的左、上、右边框？

问题背景 #

开发者使用MUI的TimePicker组件（导入语句：import { TimePicker } from '@mui/x-date-pickers';），尝试通过以下CSS代码移除输入框的左、上、右边框，但代码未生效：

border-left-style: none;
border-top-style: none;
border-right-style: none;
border-image-width: 0;
border-left-color: rgba(255, 255, 255, 0);
border-top-color: rgba(255, 255, 255, 0);
border-right-color: rgba(255, 255, 255, 0);

原因分析 #

MUI的TimePicker默认基于OutlinedInput组件实现，其边框并非直接设置在输入框元素上，而是通过内部的<fieldset>元素渲染。直接给TimePicker添加普通CSS样式，无法穿透到这个内部的fieldset元素，因此样式不生效。

解决方案 #

可以通过MUI的样式定制能力，精准定位到内部的边框元素来修改样式，以下是两种常用实现方式：

方式一：使用sx属性直接定制

通过renderInput属性传入自定义的TextField，在sx中穿透到内部的边框元素：

import { useState } from 'react';
import { TimePicker } from '@mui/x-date-pickers';
import TextField from '@mui/material/TextField';

export default function CustomTimePicker() {
  const [value, setValue] = useState(null);

  return (
    <TimePicker
      label="选择时间"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      renderInput={(params) => (
        <TextField
          {...params}
          sx={{
            // 默认状态的边框
            '& .MuiOutlinedInput-root fieldset': {
              borderLeft: 0,
              borderTop: 0,
              borderRight: 0,
            },
            // hover状态的边框
            '& .MuiOutlinedInput-root:hover fieldset': {
              borderLeft: 0,
              borderTop: 0,
              borderRight: 0,
            },
            // 聚焦状态的边框
            '& .MuiOutlinedInput-root.Mui-focused fieldset': {
              borderLeft: 0,
              borderTop: 0,
              borderRight: 0,
            },
          }}
        />
      )}
    />
  );
}

方式二：使用styled组件封装

通过MUI的styled工具创建自定义样式的TextField，再传递给TimePicker：

import { useState } from 'react';
import { styled } from '@mui/material/styles';
import { TimePicker } from '@mui/x-date-pickers';
import TextField from '@mui/material/TextField';

// 定制带无边框样式的TextField
const BorderlessTextField = styled(TextField)(({ theme }) => ({
  '& .MuiOutlinedInput-root fieldset': {
    borderLeft: 'none',
    borderTop: 'none',
    borderRight: 'none',
  },
  '& .MuiOutlinedInput-root:hover fieldset': {
    borderLeft: 'none',
    borderTop: 'none',
    borderRight: 'none',
  },
  '& .MuiOutlinedInput-root.Mui-focused fieldset': {
    borderLeft: 'none',
    borderTop: 'none',
    borderRight: 'none',
  },
}));

export default function CustomTimePicker() {
  const [value, setValue] = useState(null);

  return (
    <TimePicker
      label="选择时间"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      renderInput={(params) => <BorderlessTextField {...params} />}
    />
  );
}

注意事项 #

• 如果你的TimePicker使用的是filled或standard变体，样式结构会有所不同，需要调整选择器（比如针对.MuiFilledInput-root或.MuiInput-root）。
• 上述代码默认保留底部边框，仅移除左、上、右三边，可根据需求进一步修改。

内容的提问来源于stack exchange，提问作者Dickens A S