无法覆盖 react-date-picker 中的样式答案

【问题标题】：cannot override styles in react-date-picker无法覆盖 react-date-picker 中的样式
【发布时间】：2021-01-14 22:59:54
【问题描述】：

我已经完成了通常的建议。带有 postcss、sass 和 tailwind 的 Next.js 应用。

尝试从 calendar.module.scss 加载样式。

.react-datepicker {
  background: none;
  border: none;
  color: #969eac;
  font-size: 1rem;
  font-family: 'Mulish';
}
.react-datepicker .react-datepicker__header  {
  background-color: #fff !important;
}

即使使用 !important，上述内容也不起作用。如果我创建一个 .calendar 类并将其应用于我的组件，我至少可以让主 div 设置样式。

import styles from './calendar.module.scss'
<ReactDatePicker
  inline
  calendarClassName={styles.calendar}
/>

// ./calendar.module.scss
.calendar {
  background: none;
  border: none;
  color: #969eac;
  font-size: 1rem;
  font-family: 'Mulish';
}

但是尝试将子类添加到此没有效果。我尝试将 .react-datepicker 类添加到我的 style.css 中，但这也没有效果。

想知道是否有人可以指点一下。

谢谢！

【问题讨论】：

标签： reactjs calendar react-datepicker

【解决方案1】：

几天前我遇到了确切的问题我将 SCSS 与基于 NEXT.js 的反应应用程序一起使用，我将向您展示一些代码，如果您使用的是材料 UI 日历，这些代码将起作用注意：这是深色主题自定义日历并在没有文本字段的情况下弹出 onClick

import DateFnsUtils from "@date-io/date-fns";
import {DatePicker, MuiPickersUtilsProvider} from "@material-ui/pickers";
import React from "react";
import styles from "./Calendar.module.scss";
import Box from "@material-ui/core/Box";
import {createMuiTheme, MuiThemeProvider} from "@material-ui/core/styles";
import {black, white} from "material-ui/styles/colors";

export default function Calendar(props) {

    const materialTheme = createMuiTheme({
        palette: {
            primary: {
                main: '#3E3F42'
            }
        },
        overrides: {
            MuiPickersCalendarHeader: {
                switchHeader: {
                    backgroundColor: '#303235',
                    color: white,
                },
                iconButton: {
                    backgroundColor: "transparent",
                    color: white
                },
                dayLabel: {
                    color: white //days in calendar
                },
                transitionContainer: {
                    color: white
                }
            },
            MuiPickersBasePicker: {
                pickerView: {
                    backgroundColor: '#3E3F42'
                }
            },
            MuiPickersDay: {
                day: {
                    color: white //days in calendar
                },
                  daySelected: {
                    backgroundColor: '#FFC561', //calendar circle
                      color: black
                  },
                  current: {
                    backgroundColor: '#736F69',
                      color: white
                  },
            },

            MuiDialogActions: {
                root: {
                    backgroundColor: '#3E3F42'
                }
            }
        }
    });

    const isOpened = props.isOpened;
    const topPosition = props.topPosition;
    const selectedDate = props.selectedDate;

    const sleep = (milliseconds) => {
        return new Promise(resolve => setTimeout(resolve, milliseconds))
    }

    async function handleDateChange(date1) {
        props.onChange(date1);
        await sleep(700);
        props.setDDOpen(false);
    }

    return isOpened ? (
            <Box pad={{ vertical: 'small'}} className={styles.smallCard} style={{top: topPosition}}>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <MuiThemeProvider theme={materialTheme}>
                    <DatePicker
                        disableToolbar
                        variant="static"
                        value={selectedDate}
                        onChange={handleDateChange}
                    />
                    </MuiThemeProvider>
                </MuiPickersUtilsProvider>
            </Box>): null
}

【讨论】：