如何设置react-datepicker的样式? [英] How can I style react-datepicker?

问题描述

我正在使用 webpack ， react-datepicker ，并设法通过提供的CSS模块导入其CSS.

I'm using webpack, react-datepicker and have managed to import its css with the provided css module.

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

该组件看起来很好看，但现在我想像上面的时间元素一样使它变宽.

The component looks fine and dandy, but now I want to make it full width like the time element above it.

看看CSS，它需要的是 react-datepicker-wrapper 元素，该元素由库动态添加以具有 display:block .我在自己的CSS中对 react-datepicker-wrapper 进行的任何修改都不会执行任何操作.

Looking at the CSS, what it needs is for the react-datepicker-wrapper element that gets dynamically added by the library to have display: block. Any modifications I make to react-datepicker-wrapper in my own css does nothing.

我该怎么办?

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;

推荐答案

我认为您只是缺少一些CSS.在自定义样式表中(在datepicker样式表之后的任意位置)尝试以下操作:

I think you're just missing some CSS. Try this in your custom stylesheet (anywhere after the datepicker's stylesheet):

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

> 演示

这篇关于如何设置react-datepicker的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！