删除边框 - React MUI TimePicker

Question

开发者使用 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);

开发者如何去除React MUI TimePicker的边框

Answer 1

要从 @mui/x-date-pickers 中删除 React MUI TimePicker 中输入的边框，您可以将自定义样式应用于输入组件。方法如下：

import { TimePicker } from '@mui/x-date-pickers';

 <TimePicker
      renderInput={(props) => (
        <input
          {...props}
          style={{
            borderRight: 'none',
            borderLeft: 'none',
            borderTop: 'none',
          }}
        />
      )}
    />
    ```