map関数を使って表示しているテーブルの tbodyタグの箇所のバックグランドカラーをストライプ表示したい（Bootstrap使用）

Question

前提

React.jsにて
map関数を使ってTableを作成しています。

実現したいこと

map関数を使って表示している
tbodyタグの箇所のバックグランドカラーをストライプ表示したい（Bootstrap使用）

該当のソースコード

<table className="table table-striped table-bordered">
<thead className="table_thead ">
  <tr className="table_font_color">
    <th scope="col">Device Name</th>
    <th scope="col">Type</th>
    <th scope="col">Room</th>
  </tr>
</thead>
{entities.map((entity, i) => (
<tbody>
  <tr className="table_font_color">
    <th scope="row">
      <Icon entityKey={entity.key} type={entity.type} state={entity.state} entityID={entity.entity_id} objectID={entity.object_id} />
      <p className="">{entity.entity_id}</p>
    </th>
    <td className="align-middle">
      {entity.key === "camera" && <div>Smart Camera</div>}
      {entity.key === "cover" && <div>Garage</div>}
      {entity.key === "climate" && <div>Smart Themostat</div>}
      {entity.key === "lock" && <div>Smart Lock</div>}
      {entity.key === "light" && <div>Smart Light</div>}
      {entity.key === "sensor" && <div>Sensor</div>}
      {entity.key === "switch" && <div>Smart Plug</div>}
    </td>
    <td className="align-middle table_rightside">
      {entity.key === "switch" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
      {entity.key === "sensor" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
      {entity.key === "light" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "camera" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "climate" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "cover" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "lock" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
    </td>
  </tr>

</tbody>
))};
</table>

.table_thead {
  background-color: #152D58 !important;
}

.table-bordered {
  border: none !important;
}

.table-striped > tbody > tr:nth-child(0) > td, .table-striped > tbody > tr:nth-child(0) > th {
  background-color: #152D58 !important;
}

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
  background-color: #1E3E75 !important;
}

.table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th {
  background-color: #152D58 !important;
}

table.table-bordered > thead > tr > th{
  border:3px solid #022055 !important;
}

.table-bordered td {
  border:3px solid #022055 !important;
}

.table-bordered th {
  border:3px solid #022055 !important;
}

.table_font_color {
  color: white !important;
}

Answer 1

<tr className={`table_font_color ${i % 2 === 0 ? 'table-striped' : ''}`}>

そして

.table-striped > td {
  background-color: #1E3E75 !important;
}

.table-striped > th {
  background-color: #1E3E75 !important;
}

で解決しました。