reactjs 如何设计react-datepicker的样式？

xt0899hw 于 2022-12-03 发布在 React

关注(0)|答案(9)|浏览(136)

我正在使用webpack，react-datepicker，并且已经设法用提供的css模块导入了它的css。
import 'react-datepicker/dist/react-datepicker-cssmodules.css
组件看起来很好，但现在我想让它像上面的时间元素一样全宽。

看一下CSS，它需要的是库动态添加的react-datepicker-wrapper元素具有display: block。我在自己的css中对react-datepicker-wrapper所做的任何修改都没有任何作用。
我该怎么办？

日期选取器.组件.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;

reactjs

来源：https://stackoverflow.com/questions/55794770/how-can-i-style-react-datepicker

9条答案

按热度按时间

laawzig21#

我想你只是缺少了一些CSS。在你的自定义样式表中试试这个（在日期选择器样式表之后的任何地方）：

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

Demo

赞(0）回复(0）举报 2022-12-03

vom3gejh2#

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

赞(0）回复(0）举报 2022-12-03

pxq42qpu3#

样式化组件

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

赞(0）回复(0）举报 2022-12-03

ct3nt3jp4#

你可以通过把！important放在行的末尾来得到你的css工作：

display: block !important;

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

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

赞(0）回复(0）举报 2022-12-03

zynd9foi5#

覆盖默认的css，如

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

working example

赞(0）回复(0）举报 2022-12-03

xoshrz7s6#

你可以把它放在一个flexbox里面。
如果您使用的是引导程序，则可以在 Package 元素上使用d-flex和flex-column类。

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

如果没有，您可以使用CSS属性设定 Package 函数的样式。

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

CSS：

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

赞(0）回复(0）举报 2022-12-03

zqry0prt7#

可以向样式表中添加：

.react-datepicker__input-container{
  input{
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

}
Output

赞(0）回复(0）举报 2022-12-03

dgjrabp28#

您可以使用选取器的每个元素的类来覆盖其默认样式，使用检查工具可以标识每个元素的类，如果不应用新样式，则可以使用**！important**属性来覆盖默认样式

以下代码适用于大多数选取器元素

.react-datepicker__triangle {
  display: none;
}

.react-datepicker__day.react-datepicker__day--keyboard-selected {
  border: none;
  border-radius: 7px;
  background-color: var(--dark);
  color: var(--white);
}

.react-datepicker__day.react-datepicker__day--keyboard-selected:hover {
  border: none;
  border-radius: 7px;
  background-color: var(--dark);
  color: var(--white);
}

.react-datepicker-popper .react-datepicker__navigation {
  padding-top: 12px;
  color: #000;
}

.react-datepicker {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.189);
  border: none !important;
  font-family: "Inter" !important;
}

.react-datepicker__header {
  border-bottom: solid 5px var(--light) !important;
  background: white !important;
}

.react-datepicker__current-month {
  color: var(--dark) !important;
}

.react-datepicker__day.react-datepicker__day--today {
  border-radius: 7px;
  border: solid 2px var(--brand) !important;
  background-color: white !important;
  color: var(--dark) !important;
  width: 30px;
  height: 30px;
}

.react-datepicker__day.react-datepicker__day--selected {
  border: none;
  border-radius: 7px;
  background-color: black;
  color: white;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  border: none;
  border-radius: 7px !important;
  background-color: var(--brand) !important;
  color: var(--dark) !important;
}

赞(0）回复(0）举报 2022-12-03

8yoxcaq79#

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

<DatePicker calendarClassName={/* styles */}></DatePicker>

赞(0）回复(0）举报 2022-12-03

我来回答

reactjs 如何设计react-datepicker的样式？

9条答案

样式组件奖励：

样式化组件

相关问题

热门标签

最新问答