Question

我正在使用 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;

Answer 1

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

<块引用>

尝试使用 wrapperClassName 属性：

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

CSS：

.datePicker {
  width: 100%;
}

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

样式组件奖励：

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 />
</>

Answer 2

您可以通过在行末添加！important来获得CSS的工作：

display: block !important;

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

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

Answer 3

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

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

Demo

Answer 4

覆盖默认的CSS，例如

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

working example

Answer 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;
`;

如何设置react-datepicker的样式？

5 个答案:

样式组件奖励：

样式组件