javascript - 如何在ReactJS中使用CSS两两排列图形

Question

我在 ReactJS 中使用带重新图表的 Leaflet map 。 当用户单击 map 标记时，弹出窗口将显示六个图表，一个在另一个之下。 我想将图形设置为三行中二下二下的图形样式。

如何使用 css 设计代码样式？

代码:

      {coords.map(({ lat, lng }, index) => (
          <Marker position={[lat, lng]} icon={customMarker} key={index}>
            <div className="popup">
            <Popup maxWidth="500" maxHeight="auto" >
              {index + 1} is for popup with lat: {lat} and lon {lng}
              <div className="chart">
              <br /><br />
              Температура °C
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="TA" fill='#f70000' stroke="#f56200" />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Скорост на вятъра
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='WS' barSize={10} fill='#4287f5' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Валеж
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='RR' barSize={10} fill='#003cff' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Сняг
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey='SR' barSize={10} fill='#5df5dc' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Относителна влажност %
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Area type='monotone' dataKey='RH' fill='#8884d8' stroke='#f56200' />
              </ComposedChart>
              </div>

              <div className="chart">
              <br /><br />
              Атмосферно налягане
              <ComposedChart width={400} height={200} data={this.state.dats} margin={{
                top: 20, right: 0, left: 0, bottom: 20,
              }}>
                <CartesianGrid stroke='#f5f5f5' />
                <XAxis dataKey="DATS" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Area type='monotone' dataKey='APRES' fill='#8884d8' stroke='#f56200' />
              </ComposedChart>
              </div>
            </Popup>
            </div>
          </Marker>
        ))}
      </LeafletMap>

我要<ComposedChart/>包装并将两个分组在三行的两个图表下。 我已在代码中导入 CSS 文件。

在 css 文件中，我粘贴以下代码:

.popup {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.chart {
  width: 40%;
}

但我看不到这些变化。

CodeSandBox

Answer 1

我是一个巨大的Flexbox扇子。在您的用例中，只需几行 css 即可修复此问题(并且为 responsive ):

.popup {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
}

.chart {
  width: 40%;
}