CODEWITHSUNDEEP
reactjsmui-x-date-picker
Dickens A S
Dickens A S

Reputation: 4054

Remove Border - React MUI TimePicker

The developer uses the TimePicker from MUI

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

The developer wants to remove the right, left, top borders of the input
Below css is not working

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);

How the developer removes the borders of React MUI TimePicker

Upvotes: 0

Views: 70

Answers (1)

Yanan LYU
Yanan LYU

Reputation: 1

this is working for me:

<TimePicker
 sx={{  
      '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': { 
         border: '1px solid red'
      },
      '& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': { 
         border: '2px solid red' 
      },  // at hover state
      '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': { 
         border: '2px solid red'
      }, // at focused state
    }}
/>

Upvotes: 0

Related Questions