无法更改 Material UI DatePicker 的边框半径

Question

我正在努力让我的 DatePicker 组件从 @mui/x-date-pickers 和 Material UI V5 获得圆形边框。

我想让我的组件看起来像这样。

我尝试使用 Material UI 中的样式化组件来创建效果。我知道我的目标是 MUIOutlinedInput 样式，但我似乎无法获得正确的语法。我想知道是否有人可以提供建议。以下是我失败的方法。谢谢你

const StyledDatePicker = styled(DatePicker)(
({ theme }) => `
.MuiOutlinedInput-input: {
    border-radius: '15px'
}`,);

<StyledDatePicker
 label='To'
 format='dd MMM yyyy'
/>

Answer 1

我想你应该瞄准

MuiOutlinedInput-root

类

import { styled } from '@mui/system';
import { DatePicker } from '@mui/x-date-picker';

const StyledDatePicker = styled(DatePicker)(
  ({ theme }) => `
    .MuiOutlinedInput-root {
      border-radius: 15px;
    }
  `
);

<StyledDatePicker
  label='To'
  format='dd MMM yyyy'
/>