如何更改<DatePicker />组件的颜色？

Question

​

​

我想更改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': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&input::before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&input:before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                'input::before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                'input:before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&:before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&&:before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '&&::before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                '::before': {  // attemp
                    color: 'yellow',
                    borderBottomColor: 'yellow',
                    background: 'yellow',
                },
                ':before': {  // attemp
                    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

这是组件。请注意，当我看到文本颜色的变化时，组件会收到正确的预置。

Answer 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