如何设置 react-datepicker 样式？答案

【问题标题】：How can I style react-datepicker?如何设置 react-datepicker 样式？
【发布时间】：2019-09-11 16:02:15
【问题描述】：

我正在使用 webpack、react-datepicker 并已设法使用提供的 css 模块导入其 css。

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

组件看起来很漂亮，但现在我想让它像上面的时间元素一样全宽。

查看 CSS，它需要的是由库动态添加的 react-datepicker-wrapper 元素以具有 display: block。我在自己的 css 中对 react-datepicker-wrapper 所做的任何修改都不起作用。

我该怎么办？

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;

【问题讨论】：

这不是一个真正的 React 或日期选择器问题。它只是关于 CSS 的特殊性。您要覆盖什么规则？
我认为它使用 CSS 模块，它只是忽略了我给它的任何 CSS。这真的是问题所在。我不确定您如何覆盖第 3 方 CSS 模块样式
我问了规则是什么。那会澄清一些事情。请显示应用于元素的实际 CSS。
@SebastianPatten 你让invalid-feedback div 工作了吗？我正在做类似的事情，并且对内部表单控件输入的 className 调整不会像在两个元素是对等的标准引导示例中那样覆盖 display: none 样式。

标签： reactjs datepicker css-modules react-css-modules

【解决方案1】：

我认为您只是缺少一些 CSS。在您的自定义样式表中尝试此操作（在日期选择器样式表之后的任何位置）：

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

Demo

【讨论】：

【解决方案2】：

来自https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-704194903

尝试使用 wrapperClassName 属性：

<DatePicker wrapperClassName="datePicker" dateFormat="dd/MM/yyyy" />

CSS：

.datePicker {
  width: 100%;
}

这样你就不会修改整个应用的样式

styled-components 奖励：

import React from 'react';
import styled, { css, createGlobalStyle } from 'styled-components';
import DatePicker from 'react-datepicker';

const DatePickerWrapperStyles = createGlobalStyle`
    .date_picker.full-width {
        width: 100%;
    }
`;

<>
  <DatePicker wrapperClassName='date_picker full-width' />
  <DatePickerWrapperStyles />
</>

【讨论】：

【解决方案3】：

您可以通过将 !important 放在行尾来完成您的 css 工作：

display: block !important;

而且，你应该在最后导入你的 css 文件：

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

【讨论】：

这似乎对输入的大小没有影响，!important 应该始终是最后的手段。
css 文件的导入顺序很重要。将自定义 css 放在末尾会覆盖库文件中定义的 css - 这对我有用。使用 '!important' 绝不应该是采用的方法。

【解决方案4】：

像这样覆盖默认的css

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

working example

【讨论】：

您在工作示例中遗漏了这一行：import "react-datepicker/dist/react-datepicker.css";

【解决方案5】：

样式化组件

<>
  <DatePickerWrapper  
    popperContainer={Popper}
    calendarContainer={Calendar} 
  />
</>

const DatePickerWrapper = styled(({ className, ...props }) => (
  <DatePicker {...props} wrapperClassName={className} />
))`
  width: 100%;
`;

const Calendar = styled.div`
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(27, 37, 86, 0.16);
  overflow: hidden;
`;

const Popper = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
`;

【讨论】：

【解决方案6】：

你可以把它放在一个弹性盒子里。

如果您使用的是引导程序，则可以在包装器元素上使用 d-flex 和 flex-column 类。

<div className="d-flex flex-column">
    <DatePickerField name="date" label="Date" />
</div>

如果没有，您可以使用 CSS 属性设置包装器的样式。

<div className="date-picker-wrapper">
    <DatePickerField name="date" label="Date" />
</div>

CSS：

.date-picker-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

【讨论】：