https://i.stack.imgur.com/JLtGz.png
I am trying to customize the underline color of the DatePicker component. Below is my code snippet attempting to achieve this:
import React from 'react'
import PropTypes from 'prop-types'
import { DatePicker as MuiDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'
import { makeStyles } from '@material-ui/core/styles'
import DateFnsUtils from '@date-io/moment' // choose your lib
import { usePreset } from '../'
const presets = {
repainted: {
InputProps: {
className: 'test',
underColor: 'yellow',
style: {
color: 'red',
borderBottomColor: 'red',
'&::before': { // attempt
color: 'yellow',
borderBottomColor: 'yellow',
background: 'yellow',
},
...
},
},
useStyles: makeStyles(theme => ({
root: {},
})),
},
}
const DatePicker = React.forwardRef((props, ref) => {
const {classes, ...rest} = usePreset(presets, props)
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<MuiDatePicker ref={ref} className={classes?.root} {...rest}/>
</MuiPickersUtilsProvider>
)
})
DatePicker.propTypes = {
preset: PropTypes.oneOf(Object.keys(presets)),
...MuiDatePicker.propTypes,
}
export default DatePicker
The text above showcases my customization attempts for changing the underline color in the DatePicker component. By specifying a preset, I observe changes in the text color.