如何使用react day picker的顺风

Question

我目前正在尝试使用Tailwind对DayPickerInput进行样式设置，但它不起作用。我已经阅读了文档，但它似乎没有集成，那么有什么好的方法可以做到这一点呢？

目前的解决方法是使用nextjs样式，我认为这不是一个好方法

import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
export default function DatePicker() {
return (
<div>
<div className="grid grid-cols-3">
<label>From:</label>
<DayPickerInput />            <=== I am trying to style this component using tailwind.
</div>
<style jsx global>
{`
.DayPickerInput input {
width: 120px;
padding: 10px;
}
`}
</style>
</div>
);
}

Answer 1

试着像下面的一样应用你的风格

.DayPickerInput {
@apply w-full;
}
.DayPickerInput input {
@apply py-1 w-full px-2 text-base text-gray-700 bg-white rounded-xl outline-none focus:ring-0  transition duration-200 border-gray-400 border focus:border-primary-800;
}