React中如何通过Props修改组件的grid-area CSS属性？

我已经在React应用的body上设置了display: grid;，现有一个复用组件占用了网格的一部分，希望再并排重复两次该组件。如何通过Props为grid-area这个CSS属性传值，修改另外两个组件在网格中的位置？我尝试了常规的Props用法，但仅能影响HTML，不清楚如何修改复用组件的CSS属性。当前布局正常，仅需修改grid-area属性值，求React中用Props修改特定CSS属性的语法。

用户提供的代码如下：

function App() {
  return (
    <>
      <Nav />
      <Sidebar />
      <Main />
      <Content h1="Content1"/>
      <Footer/>
    </>
  )
}
export default App

import './Content.css'

function Content(props) {
    return (
        <div className="content">
            <h1>{props.h1}</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                Nemo laborum sapiente placeat dolorem a quae!
            </p>
        </div>
    );
}
export default Content

.content {
    grid-area: content1;
}
.content h1 {
    padding: 1rem;
    background: orange;
    color: white;
    font-weight: 700;
    border-radius: 0.25rem 0.25rem 0 0;
}
.content p {
    padding: 1rem;
    line-height: 1.6;
}

方式1：内联样式动态传递grid-area #

React中可以通过组件的style属性直接传入动态CSS值，注意CSS属性grid-area在JSX中需要写成驼峰式的gridArea。

修改Content组件：

import './Content.css'

function Content(props) {
    return (
        <div 
            className="content"
            style={{ gridArea: props.gridArea }} // 传入动态网格区域值
        >
            <h1>{props.h1}</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                Nemo laborum sapiente placeat dolorem a quae!
            </p>
        </div>
    );
}
export default Content

在App中复用并传值：

function App() {
  return (
    <>
      <Nav />
      <Sidebar />
      <Main />
      <Content h1="Content1" gridArea="content1"/>
      <Content h1="Content2" gridArea="content2"/>
      <Content h1="Content3" gridArea="content3"/>
      <Footer/>
    </>
  )
}
export default App

方式2：动态类名绑定（适合预定义多场景） #

如果已经在CSS中定义了多个网格区域对应的类，可通过props传递类名切换：

先更新CSS：

.content {
    /* 保留原有基础样式 */
}
.content.content1 {
    grid-area: content1;
}
.content.content2 {
    grid-area: content2;
}
.content.content3 {
    grid-area: content3;
}
/* 以下保留原有样式 */
.content h1 {
    padding: 1rem;
    background: orange;
    color: white;
    font-weight: 700;
    border-radius: 0.25rem 0.25rem 0 0;
}
.content p {
    padding: 1rem;
    line-height: 1.6;
}

修改Content组件：

import './Content.css'

function Content(props) {
    return (
        <div 
            className={`content ${props.gridClass}`} // 拼接动态类名
        >
            <h1>{props.h1}</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                Nemo laborum sapiente placeat dolorem a quae!
            </p>
        </div>
    );
}
export default Content

在App中使用：

function App() {
  return (
    <>
      <Nav />
      <Sidebar />
      <Main />
      <Content h1="Content1" gridClass="content1"/>
      <Content h1="Content2" gridClass="content2"/>
      <Content h1="Content3" gridClass="content3"/>
      <Footer/>
    </>
  )
}
export default App

关键注意点 #

确保body网格容器已预先定义对应网格区域，否则grid-area值无法生效，示例：

body {
    display: grid;
    grid-template-areas: 
        "nav nav nav"
        "sidebar main content1"
        "sidebar main content2"
        "sidebar main content3"
        "footer footer footer";
    /* 需额外设置grid-template-rows/columns分配空间 */
}

内容的提问来源于stack exchange，提问作者John R.