'Material UI Lab v5: How to style DateRangePicker calendar?
I'm using the DateRangePicker
component from @mui/lab
(v5.0.0-alpha.62) and I want to add a border around the calendar to make it stand out more from the background. My problem is that since it is a Lab component, there doesn't seem to be standard .Mui_XXXX
styling to override and the component doesn't take style
or sx
props nor does it have a calendarProps
to pass props to for styling. Any way to do this or am I SOL till the component is moved into the main library? I also tried PaperProps
to pass styling directly to the paper component as called out in the documentation but the component doesn't react to anything I add within it.
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateRangePicker
startText="From date"
endText="To date"
value={fromToDate}
onChange={onToFromDateChange}
maxDate={endYesterday}
renderInput={(startProps, endProps) => (
<div style={{ display: 'block' }}>
<div style={{ marginBottom: '25px', width: '300px' }}>
<TextField
{...startProps}
variant="outlined"
fullWidth
/>
</div>
<div style={{ marginBottom: '25px', width: '300px' }}>
<TextField {...endProps} variant="outlined" fullWidth />
</div>
</div>
)}
/>
</LocalizationProvider>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|