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

Question

我在ReactJS中使用带地图的传单地图。当用户单击地图标记时，PopUp将显示六个图表，一个在另一个下方。我想在两行中的两行之下为两行设置图形样式。

如何使用CSS设置代码样式？

代码：

        {coords.map(({ lat, lng }, index) => (
          <Marker position={[lat, lng]} icon={customMarker} key={index}>
            <Popup className="custom-popup" maxWidth="500" maxHeight="auto" >
              {index + 1} is for popup with lat: {lat} and lon {lng}

              <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>

              <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> 

              <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>

              <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>


              <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>

              <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>  




            </Popup>
          </Marker>
        ))}
      </LeafletMap>
    );
  }
}

我想包装<ComposedChart/>，然后将两个图表分成两行，分成三行。我已经在代码中导入了CSS文件。

Answer 1

[我是Flexbox的忠实粉丝。在您的用例中，只需几行CSS就可以解决此问题（并且是responsive）：

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

.chart {
  width: 40%;
  padding: 16px;
}