如何为MUI X DatePicker设置圆角边框？

你的代码存在两个核心问题：

• CSS选择器语法错误，多余的冒号导致样式无法生效
• 选错了目标元素，DatePicker的外边框由MuiOutlinedInput-notchedOutline类控制，而非input本身

以下是两种正确的实现方式：

方式一：使用styled组件 #

import { styled } from '@mui/material/styles';
import { DatePicker } from '@mui/x-date-pickers';

const StyledDatePicker = styled(DatePicker)(({ theme }) => ({
  // 设置默认状态下的边框圆角
  '& .MuiOutlinedInput-notchedOutline': {
    borderRadius: '15px',
  },
  // 保持聚焦状态下的圆角样式
  '& .Mui-focused .MuiOutlinedInput-notchedOutline': {
    borderRadius: '15px',
  },
}));

// 调用组件
<StyledDatePicker
  label='To'
  format='dd MMM yyyy'
/>

方式二：直接使用sx属性（更简洁） #

如果不需要复用样式，直接用sx属性写内联样式更高效：

<DatePicker
  label='To'
  format='dd MMM yyyy'
  sx={{
    '& .MuiOutlinedInput-notchedOutline': {
      borderRadius: '15px',
    },
    '& .Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderRadius: '15px',
    },
  }}
/>

补充说明 #

• 若需要调整输入框内部间距，可额外设置.MuiOutlinedInput-input的padding值
• 确保已正确引入@mui/material/styles和@mui/x-date-pickers相关依赖

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