Как настроить стиль в react-datepicker?

Я хочу изменить стиль response-datepicker:

1. измените поле ввода на индивидуальный стиль

2. изменить стиль и язык календаря

Я видел сообщение (Настраиваемое поле ввода на datepicker, [response-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'));

Как настроить стиль в react-datepicker?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
0
13 573
3

Ответы 3

Привет, вам нужно создать свою собственную таблицу стилей css и импортировать ее в реакцию

Также попробуйте использовать !important в кодах css для применения вашей пользовательской таблицы стилей к стилям по умолчанию.

  • импортировать файл sass из node_modules
  • переопределить классы
@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 и используйте его.

Для простых изменений стиля, таких как шрифт, размер шрифта или цвета, я предлагаю просто переопределить scss-переменные по умолчанию для response-datepicker. Например:

  1. Создайте scss-файл с переменными: variables.scss

    $ datepicker__font-size: 1rem;

  2. Импортируйте файл переменных и файл datepicker.scss из узловых модулей:

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

  3. Скомпилировать в css. Новое значение должно заменить значение по умолчанию $datepicker__font-size: 0.8rem !default;.

Полный список переменных можно найти: node_modules/react-datepicker/src/stylesheets/variables.scss

Другие вопросы по теме