如何设置react-datepicker的样式？
如何设置react-datepicker的样式？
提问于 2019-04-22 20:55:08
我正在使用react-datepicker的webpack，并且已经设法用提供的css模块导入了它的css。
import 'react-datepicker/dist/react-datepicker-cssmodules.css
这个组件看起来很漂亮，但现在我想让它像上面的time元素一样全宽。
看一下CSS，它需要的是由库动态添加的具有display: block的react-datepicker-wrapper元素。我在自己的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;回答 5
Stack Overflow用户
发布于 2019-04-22 21:35:09
我想你只是遗漏了一些CSS。在您的自定义样式表(datepicker的样式表之后的任何位置)中尝试此操作：
.react-datepicker-wrapper,
.react-datepicker__input-container,
.react-datepicker__input-container input {
display: block;
width: 100%;
}Stack Overflow用户
发布于 2019-04-22 21:26:41
你可以通过在行的末尾加上!important来让你的css工作：
display: block !important;并且，您应该在最后导入css文件：
import 'library0.css';
import 'library1.css';
import 'library2.css';
import 'yourCss.css'; // Your cssStack Overflow用户
发布于 2019-04-22 21:41:39
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55794770
复制相关文章
相似问题