我是一个新的反应和我试图使用一个组件在页面上几次，与不同的背景颜色，每次我使用它。我试过下面的代码（不改变背景颜色），但在网上找不到任何有用的东西。有人知道怎么做吗？

我说的组件是“节”

主页:

function App() {
  return (
    <div className="App">
      <Navbar />
      <h1 id="mainTitle">My website</h1>
      <h1 id="subTitle">a cool new website</h1>
      <Section style={{backgroundColor: "red"}}/>
      <Section style={{ backgroundColor: "blue"}}/>
    </div>

  );
}

组件CSS:

.section{
  text-align: left;
  font-size: large;
  padding: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
}

组件js:

import './Section.css';

function Section() {
    return (
        <div class="section">
            <p>Text example</p>
            <p>
            <ul>
                <li>item 1</li>
                <li>item 2</li>
            </ul>
            </p>
        </div>
    );
}

export default Section;