如何在 react-datepicker 中自定义样式？

Posted 2023-05-07

【中文标题】如何在 react-datepicker 中自定义样式？

【英文标题】：How to customize the style in react-datepicker?

【发布时间】：2019-05-28 04:39:20

【问题描述】：

我想改变react-datepicker的样式：

1.将输入框改为自定义样式

2.更改日历的样式和语言

我看到一个帖子 (Custom Input Field on datepicker, [react-datepicker components] https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) 谈论更换整个组件。我可以直接编辑样式而不编写新组件吗？如果是，我怎样才能做到这一点？此外，我不知道如何更改日历。如何找出我应该更改哪个组件？

import React, Component from 'react';
import render from 'react-dom';

import moment from 'moment';

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const Input = (onChange, placeholder, value, isSecure, id, onClick) => (
    <input
        style=backgroundColor:"black"
        onChange=onChange
        placeholder=placeholder
        value=value
        isSecure=isSecure
        id=id
        onClick=onClick
    />
);

const NoClickInput = (onClick, ...props) => <Input ...props />;

class App extends Component 
    state = 
        startDate: moment(),
        endDate: moment()
    ;

    render() 
        const startDate, endDate = this.state;
        return (
            <div>
                <div>Start:</div>
                <DatePicker
                    selected=startDate
                    selectsStart
                    startDate=startDate
                    endDate=endDate
                    onChange=date=>this.setState(startDate)
                />
                <div>End:</div>
                <DatePicker
                    selected=endDate
                    selectsEnd
                    startDate=startDate
                    endDate=endDate
                    onChange=date => this.setState( endDate )
                />
            </div>
        );
    


render(<App />, document.getElementById('root'));

【参考方案1】：

您好，您需要创建自定义 css 样式表并将其导入到 react 中

还可以尝试在 css 代码中使用 !important 将自定义样式表应用于默认样式

【参考方案2】：

从 node_modules 导入 sass 文件 覆盖类

@import 'node_modules/react-datepicker/src/stylesheets/datepicker.scss';

.react-datepicker__month-container 
  background-color: #081833;
  color: #969eac;
  font-size: 1rem;
  font-family: 'Mulish';

  .react-datepicker__month 
    padding: 1rem 0;
  

  .react-datepicker__month-text 
    display: inline-block;
    width: 5rem;
    margin: 0.5rem;
    font-size: 1rem;
    padding: 0.2rem;
    &:hover 
      background-color: #534cea;
    
  

  

使用 sass 文件或将其编译为 css 并使用。

【参考方案3】：

对于简单的样式更改，如字体、字体大小或颜色，我建议简单地覆盖 react-datepicker 的默认 scss-variables。例如：

创建一个带有变量的 scss 文件：variables.scss

$datepicker__font-size: 1rem;

从节点模块导入变量文件和 datepicker.scss 文件：

@import 'variables.scss'; @import 'node_modules/react-datepicker/src/stylesheets/datepicker.scss';

编译成css。新值应替换默认值$datepicker__font-size: 0.8rem !default;

可以找到完整的变量列表：node_modules/react-datepicker/src/stylesheets/variables.scss