Как я могу стилизовать реагировать на дату? - PullRequest
Новая
       43

Как я могу стилизовать реагировать на дату?

1 голос
/ 22 апреля 2019

Я использую webpack , response-datepicker и мне удалось импортировать его css с помощью предоставленного модуля css.

import 'react-datepicker/dist/react-datepicker-cssmodules.css

Компонент выглядит прекрасно и модно, но теперь я хочу сделать его на всю ширину, как элемент времени над ним.

enter image description here

Глядя на CSSдля этого нужно, чтобы элемент react-datepicker-wrapper, который динамически добавлялся библиотекой, имел display: block.Любые изменения, которые я делаю в react-datepicker-wrapper в моем собственном css, ничего не делают.

Что мне делать?

enter image description here

date-picker.component.jsx 

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import './date-picker.component.bootstrap.css';

// eslint-disable-next-line no-confusing-arrow
const buildClassNames = (touched, isInvalid) =>
touched && isInvalid ? 'form-control is-invalid' : 'form-control';

export const DatePickerBootstrap = (props) => {
  const { setFieldValue, setFieldTouched, errors, touched } = props;
  const { name, value, label, ...rest } = props;

  return (
<div className="form-group">
    <label className='datePickerLabel' htmlFor={name}>{label}</label>
    <DatePicker
    selected={value}
    onChange={(e) => {
      setFieldValue(name, e);
      setFieldTouched(name);
    }}
    className={buildClassNames(touched, !!errors)}
    customInput={
        <input
        type="text"
        id={name}
        placeholder={label} />
    }
    {...rest}
    />

    <div className="invalid-feedback">
        {errors}
    </div>
</div>
  );
};

export default DatePickerBootstrap;

Ответы [ 3 ]

1 голос
/ 22 апреля 2019

Я думаю, вам просто не хватает CSS.Попробуйте это в своей пользовательской таблице стилей (в любом месте после таблицы стилей DatePicker): 

.react-datepicker-wrapper,
.react-datepicker__input-container,
.react-datepicker__input-container input {
    display: block;
    width: 100%;
}

Демо

1 голос
/ 22 апреля 2019

перезаписать css по умолчанию, например 

.react-datepicker__input-container input {
   width: 100%;
}

рабочий пример

0 голосов
/ 22 апреля 2019

Вы можете получить свою работу CSS, поставив! В конце строк: 

display: block !important;

И вы должны импортировать файл CSS в конце: 

import 'library0.css';
import 'library1.css';
import 'library2.css';
import 'yourCss.css'; // Your css
...