@lunit/oui
Version:
Lunit Oncology UI components
35 lines (34 loc) • 1.78 kB
JavaScript
import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
import { styled } from '@mui/material/styles';
// MUI X v8+ renders the picker field with the accessible DOM structure, so the
// field root is `.MuiPickersInputBase-root` (not `.MuiInputBase-root`) and the
// border lives on `.MuiPickersOutlinedInput-notchedOutline` (not a `fieldset`).
const StyledDatePicker = styled(DesktopDatePicker)(({ theme }) => ({
'.MuiPickersInputBase-root': {
height: '36px',
backgroundColor: theme.palette.neutralGrey[75],
'&:hover .MuiPickersOutlinedInput-notchedOutline': {
borderColor: `${theme.palette.neutralGrey[45]} !important`,
},
// The library focus rule (`&.Mui-focused:not(.Mui-error) .notchedOutline`)
// has higher specificity and forces `primary.main` at 2px, so we need
// `!important` to keep the original teal 1px focus border.
'&.Mui-focused .MuiPickersOutlinedInput-notchedOutline': {
borderColor: `${theme.palette.lunitTeal[10]} !important`,
borderWidth: '1px !important',
},
// When the field is empty the hidden input shows its placeholder, so
// `:placeholder-shown` matches. In that state, stop clicking from
// selecting/highlighting the placeholder sections — restoring the original
// single-input behavior where the placeholder was never selectable.
'&:has(.MuiPickersInputBase-input:placeholder-shown)': {
'& .MuiPickersInputBase-sectionsContainer': {
userSelect: 'none',
},
'& .MuiPickersInputBase-sectionContent::selection': {
backgroundColor: 'transparent',
},
},
},
}));
export { StyledDatePicker };