Я хочу изменить стиль 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'));





Привет, вам нужно создать свою собственную таблицу стилей css и импортировать ее в реакцию
Также попробуйте использовать !important в кодах css для применения вашей пользовательской таблицы стилей к стилям по умолчанию.
@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;
}
}
}
Для простых изменений стиля, таких как шрифт, размер шрифта или цвета, я предлагаю просто переопределить scss-переменные по умолчанию для response-datepicker. Например:
Создайте scss-файл с переменными: variables.scss
$ datepicker__font-size: 1rem;
Импортируйте файл переменных и файл datepicker.scss из узловых модулей:
@import 'variables.scss';
@import 'node_modules / response-datepicker / src / stylesheets / datepicker.scss';
Скомпилировать в css. Новое значение должно заменить значение по умолчанию $datepicker__font-size: 0.8rem !default;.
Полный список переменных можно найти: node_modules/react-datepicker/src/stylesheets/variables.scss