array.mapでレンダリングした要素群において、最後の要素だけ違うCSSを適用する方法を教えていただきたいです。

Question

const array = ["A", "B", "C", "D"];
const lists = array.map(alphabet => (
  <li className="lists" key={alphabet}>
    {alphabet}
  </li>
));

上記のコードでレンダリングした要素の内、最後の要素Dだけ、違うCSSを適用する方法を教えていただきたいです。

下記は動作サンプルです。
動作サンプル
サンプルではレンダリングする各要素にmargin-bottomほかを設定していますが、最後の要素であるD要素は、margin-bottomを0にしたいです。

ソースコード

export default function App() {
  const array = ["A", "B", "C", "D"];
  const lists = array.map(alphabet => (
    <li className="lists" key={alphabet}>
      {alphabet}
    </li>
  ));

  return (
    <div className="wrap">
      <ul>{lists}</ul>
    </div>
  );
}

.wrap {
  background-color: gray;
  padding: 16px;
}

.lists {
  background-color: lightGray;
  height: 50px;
  width: 100px;
  margin-bottom: 50px;
}

試したこと

配列の内、渡った値がDであればmargin-bttom: 0のインラインスタイルを適用する、というコードを書いてみました。

<li className="lists" style={alphabet==="D" && { marginBottom: 0 }} key={alphabet}>
    {alphabet}
</li>

エラー内容は下記です。

The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
    in li (at App.js:7)
    in ul (at App.js:14)
    in div (at App.js:13)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

内容を見るに、スタイル属性には条件式が使えなさそうです。

Answer 1

.lists:last-child { margin-bottom: 0; }