我正在使用webpack，react- datepicker并设法使用提供的 css module导入其 css。

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

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

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

我该怎么办？

日期选择器.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;