如何用Carbon Components React将Modal标题改为h1标签？

方法一：使用Carbon官方配置属性 #

Carbon Components React的Modal组件自带headingAs属性，专门用来指定标题的HTML标签类型，默认值是'h3'。直接添加该属性并设置为"h1"就能实现需求：

<Modal 
  open 
  passiveModal 
  modalHeading="Let's Continue Your Online Set Up"
  headingAs="h1"
></Modal>

渲染后会自动生成带Carbon样式的h1标签：

<h1 id="cds--modal-header__heading--modal-7" class="cds--modal-header__heading">Let's Continue Your Online Set Up</h1>

方法二：自定义Modal头部（兼容旧版本） #

如果你的Carbon版本不支持headingAs属性，可以放弃使用modalHeading，手动自定义Modal的头部内容，自己渲染h1标签并套用Carbon的样式类：

<Modal 
  open 
  passiveModal
>
  <ModalHeader>
    <h1 className="cds--modal-header__heading">Let's Continue Your Online Set Up</h1>
  </ModalHeader>
  <ModalBody>
    {/* 这里添加Modal的主体内容 */}
  </ModalBody>
</Modal>

这种方式完全由你控制标签类型，同时通过cds--modal-header__heading类名保证样式和原组件一致。

内容的提问来源于stack exchange，提问作者xoam