Как изменить цвет компонента <DatePicker />

Я хочу изменить цвет подчеркивания компонента DatePicker . Вот моя попытка сделать это

      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': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&input::before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&input:before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                'input::before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                'input:before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&:before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&&:before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&&::before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '::before': {  // removes underline
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                ':before': {  // removes underline
                    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

Вот компонент. Обратите внимание, что компонент получает правильную предустановку, поскольку я вижу изменение цвета текста.

Источник

1 ответ

Согласно документации, The only way to override existing stylesheets are with the use of global material-ui theme overrides.. Вы также можете попробовать использовать встроенные стили, чтобы изменить цвет компонента. источник: https://material-ui-pickers.dev/guides/css-overrides

Источник
Другие вопросы по тегам