Question

我想更改react-datepicker的样式：

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

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

我看到一则帖子（Custom Input Field on datepicker，[react-datepicker组件] 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'));

Answer 1

嗨，您需要创建自定义的CSS样式表并将其导入到react

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

Answer 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并使用它。

Answer 3

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

创建一个包含变量的 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

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

3 个答案: