Как настроить стиль в реагировать на дату выбора? - PullRequest
Новая
       23

Как настроить стиль в реагировать на дату выбора?

0 голосов
/ 31 декабря 2018

Я хочу изменить стиль реагирования:

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

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

Я видел сообщение ( Пользовательское поле ввода в DatePicker , [act-datepicker component] 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'));

Edit 8nm3x4y300

1 Ответ

0 голосов
/ 31 декабря 2018

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

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

...