如何防止 react-datepicker 将内联元素推送到切换时的新行？

Question

当对 2 个相邻元素使用 react-datepicker 时，第二个元素在第一个元素的点击事件中被推到下一行。

之前：

之后：

MRE：

import DatePicker from 'react-datepicker';

const DateRangeInput = () => (
    <>
        <DatePicker />
        <DatePicker />
    </>
);

我已经尝试了几个小时的各种 css 属性，但找不到有用的东西。我怎样才能避免这种情况？

这里是sandbox link and the mre.

确保等待“loaded”出现在屏幕上（编译需要几秒钟）。

Answer 1

这在我的测试中有效：

import DatePicker from 'react-datepicker';

const DateRangeInput = () => (
    <div css={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
    }}>
        <div><DatePicker /></div>
        <div><DatePicker /></div>
    </>
);

以任何你喜欢的方式添加你的风格...我使用了情感，但你明白了。

这是在您的 codesandbox link 中实现上述内容的 codesandbox。我将情感风格转换为原版 css，因此它适合您所获得的内容。

Answer 2

可能使用 flex 和 maxWidth 也会有帮助。

 export default function App() {
      return (
        <div>
          <h1>loaded</h1>
          <div style={{ display: "flex", maxWidth: "200px" }}>
            <DatePicker />
            <DatePicker />
          </div>
        </div>
      );
    }

沙盒：Code

如何防止 react-datepicker 将内联元素推送到切换时的新行？

how to prevent react-datepicker from pushing inline elements to new line on toggle?

javascript

reactjs

react-datepicker

之前：

之后：

MRE：