如何修改React Bootstrap组件默认类及替换Card.Title的h5标签

嘿，刚好对这个问题很熟，给你拆解成两个部分来解决：

一、修改默认的card-title类 #

React Bootstrap的组件大多支持bsPrefix这个属性，专门用来覆盖默认的Bootstrap类名前缀。如果你想替换默认的card-title类，直接给Card.Title传这个属性就行：

<Card.Title bsPrefix="my-custom-title-class">Foo</Card.Title>

这样渲染出来的元素就会用my-custom-title-class代替默认的card-title。如果只是想添加额外的类而不是替换，直接用className属性就可以，默认的card-title会和你加的类共存：

<Card.Title className="extra-title-style">Foo</Card.Title>

渲染结果会是：<h5 class="card-title extra-title-style">Foo</h5>

二、替换或移除默认的h5元素 #

这个更简单，Card.Title提供了as属性，用来指定它要渲染成的HTML元素：

替换成h4元素 #

直接把as设为"h4"就行：

<Card.Title as="h4">Foo</Card.Title>

渲染出来就是：<h4 class="card-title">Foo</h4>

移除标题级元素（比如换成div/span） #

如果不需要h5这类标题标签，换成普通的块级或行内元素：

// 换成div
<Card.Title as="div">Foo</Card.Title>
// 换成span
<Card.Title as="span">Foo</Card.Title>

要是你完全不想用Card.Title组件的包裹，也可以直接自己写元素，然后手动加上card-title类（如果需要Bootstrap的样式）：

<h4 className="card-title">Foo</h4>

内容的提问来源于stack exchange，提问作者Matthias Güntert