javascript - 使用 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>
  );
}