使用 React Bootstrap 自定义 Card.Header

Question

当 Card.Header 作为 props 传递给 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>

Answer 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>

  );

}

Answer 2

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

<b> Click me! </b> 

<b></b>