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

【问题标题】：how to prevent react-datepicker from pushing inline elements to new line on toggle?如何防止 react-datepicker 在切换时将内联元素推送到新行？
【发布时间】：2020-09-14 21:55:18
【问题描述】：

当react-datepicker 与两个相邻元素一起使用时，第二个元素在第一个元素的点击事件期间被推送到下一行。

之前：

之后：

MRE：

import DatePicker from 'react-datepicker';

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

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

这是sandbox link 和mre。

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

【问题讨论】：

您尝试过：max-width: value 在您的Fragement 中吗？
@MenaiAlaEddine-Aladdin 我刚试过，但没有任何改变
你能通过Sandbox复制你的代码吗？
你不能将 CSS 添加到 Fragment ......这将应用于 html 中的哪些元素？
@MenaiAlaEddine-Aladdin 我用沙盒链接更新了问题

标签： javascript reactjs react-datepicker

【解决方案1】：

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

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

沙盒：Code

【讨论】：

【解决方案2】：

这在我的测试中有效：

import DatePicker from 'react-datepicker';

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

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

这里是codesandbox，它在您的代码框链接中实现了上述内容。我将情感样式转换为原版 CSS，因此它适合您所获得的内容。

【讨论】：

你为什么用div包裹DatePicker？
因为否则 Datepicker 将脱离容器并成为多个元素。这将包含它。我不像下一个人那样喜欢 div-soup，但我没有办法解决它
这在我的机器上不起作用，或者在sandbox
伙伴...你只能将两个元素放入 div...你添加了三个并且没有包装 Datepicker...
@Dominik 我在测试您的代码时做过。这是带有您的代码的fork