如何设置 react-datepicker 样式？

Posted 2023-02-21

【中文标题】如何设置 react-datepicker 样式？

【英文标题】：How can I style 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 样式。

【参考方案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;