【Gatsby】MDXにむりやりスタイルを付ける

以下はmdx。jsxで記述した箇所にスタイルを充てるのは簡単だけど、「# Header」の箇所にスタイルを充てるのはなんか色々設定する必要がある。

---
title: "Second Post"
date: "2021-07-25"
---

import "./style.css"


# Header1

<div style={{ padding: "10px 30px", backgroundColor: "tomato" }}>
    <h2>Try making this heading have the color tomato</h2>
</div>

F12で見てみると、「# Header」の箇所には、id="Header"がついているので、cssでそこにスタイルを付けられる。

#Header{
  background-color:red;
}