如何解决如何防止react-datepicker在切换时将内联元素推到新行?
将react-datepicker与2个相邻元素一起使用时,第二个元素在第一个元素的click事件期间被推到下一行。
之前:
之后:
MRE:
import DatePicker from 'react-datepicker';
const DateRangeInput = () => (
<>
<DatePicker />
<DatePicker />
</>
);
我已经尝试了多个CSS属性的小时,但是找不到有效的方法。我该如何预防?
这里是sandbox link和mre。
确保等待“已加载”出现在屏幕上(编译需要几秒钟)。
解决方法
这在我的测试中有效:
import DatePicker from 'react-datepicker';
const DateRangeInput = () => (
<div css={{
display: 'grid',gridTemplateColumns: '1fr 1fr',}}>
<div><DatePicker /></div>
<div><DatePicker /></div>
</>
);
以您喜欢的任何方式添加您的样式...我用情感表达,但您明白了。
这里是codesandbox,可在您的codeandbox链接中实现以上功能。我将情感样式转换为香草CSS,使其与您所到之处完全吻合。
,可以将flex
与maxWidth
一起使用也会有帮助。
export default function App() {
return (
<div>
<h1>loaded</h1>
<div style={{ display: "flex",maxWidth: "200px" }}>
<DatePicker />
<DatePicker />
</div>
</div>
);
}
沙盒:Code
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。