使用 React Bootstrap 自定义 Card.Header答案

【问题标题】：Customizing Card.Header with React Bootstrap使用 React Bootstrap 自定义 Card.Header
【发布时间】：2020-04-01 11:28:34
【问题描述】：

当 Card.Header 作为道具传递给 Accordion.Toggle 时，如何设置它的样式？例如，我不知道如何将“Click Me”加粗。

    <Accordion defaultActiveKey="0">
        <Card>
            <Accordion.Toggle as={Card.Header} eventKey="0">
            Click me!
            </Accordion.Toggle>
            <Accordion.Collapse eventKey="0">
            <Card.Body>Text</Card.Body>
            </Accordion.Collapse>
        </Card>
        <Card border="secondary">
            <Accordion.Toggle as={Card.Header} eventKey="1">
            Click me!
            </Accordion.Toggle>
            <Accordion.Collapse eventKey="1">
            <Card.Body>Hello! I'm another body</Card.Body>
            </Accordion.Collapse>
        </Card>
    </Accordion>

【问题讨论】：

标签： javascript html reactjs react-bootstrap

【解决方案1】：

使用普通的内联样式就可以了

<Accordion>
  <Card>
     <Accordion.Toggle as={Card.Header} eventKey="0" style={{color: 'red'}}>
  ...

您也可以使用它构建自定义组件，参考相关文档：custom-toggle

例子：

export default function App() {
  return (
    <div className="App">
      <Accordion defaultActiveKey="0">
        <Card>
          <Accordion.Toggle as={Card.Header} eventKey="0" style={{color: 'red'}}>
            Click me!
          </Accordion.Toggle>
          <Accordion.Collapse eventKey="0">
            <Card.Body>Text</Card.Body>
          </Accordion.Collapse>
        </Card>
        <Card border="secondary">
          <Accordion.Toggle as={Card.Header} eventKey="1">
            Click me!
          </Accordion.Toggle>
          <Accordion.Collapse eventKey="1">
            <Card.Body>Hello! I'm another body</Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
}

【讨论】：

【解决方案2】：

您是否尝试过添加粗体 html 标签？

<b> Click me! </b> 

<b></b>

【讨论】：