反应-改变可重用组件的背景颜色

Question

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

我说的组件是“节”

主页:

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;

Answer 1

我会做:

CSS:

.bg-red {
  background-color: red;
}
.bg-blue {
  background-color: blue;
}

子组件:

export default function Section(props) {
  const {className = ''} = props
  return <>
    <div className={className}>
      <p>content here</p>
    </div>
  <>
}

父组件:

export default function App() {
  return <>
    <Section className="bg-red"/>
    <Section className="bg-blue"/>
  </>
}