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

【问题标题】：How can I change color for the <DatePicker /> component如何更改 <DatePicker /> 组件的颜色
【发布时间】：2021-09-06 16:21:42
【问题描述】：

我想更改 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

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

【问题讨论】：

usePreset 是做什么的？如果您包含 code sandbox 来重现您的问题，那么提供帮助会更容易。看起来您正在尝试通过内联样式执行此操作，但内联样式不支持 :before 等伪类。您需要为此使用 CSS 类。
在这里更改数据选择器颜色是整个指南material-ui-pickers.dev/guides/css-overrides

标签： material-ui material-ui-x

【解决方案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

【讨论】：