Comment puis-je styler réagir-standepicker?

Question

J'utilise Webpack , React-datePicker et avez réussi à importer son CSS avec le module CSS fourni.

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

Le composant a l'air bien et dandy, mais maintenant je veux que cela soit toute la largeur, comme l'élément de temps au-dessus.

En regardant le CSS, ce dont il a besoin est pour le react-datepicker-wrapper élément qui est ajouté de manière dynamique par la bibliothèque d'avoir display: block. Toute modification que je fais à react-datepicker-wrapper Dans mon propre CSS ne fait rien.

Que devrais-je faire?

date-sélecteur.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

De https://github.com/hacker0x01/react-datepicker/issues/2099#issuecomment-7041949

Essayez avec la propriété WrapperClassName:

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

CSS:

.datePicker {
  width: 100%;
}

De cette façon, vous ne modifiez pas les styles de l'application entière

bonus de composants de style:

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