使用 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>&nbsp; <Card>&nbsp; &nbsp; &nbsp;<Accordion.Toggle as={Card.Header} eventKey="0" style={{color: 'red'}}>&nbsp; ...您还可以用它构建自定义组件，参考相关文档：custom-toggle例子：export default function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <Accordion defaultActiveKey="0">&nbsp; &nbsp; &nbsp; &nbsp; <Card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Accordion.Toggle as={Card.Header} eventKey="0" style={{color: 'red'}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Click me!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Accordion.Toggle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Accordion.Collapse eventKey="0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Body>Text</Card.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Accordion.Collapse>&nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; &nbsp; <Card border="secondary">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Accordion.Toggle as={Card.Header} eventKey="1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Click me!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Accordion.Toggle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Accordion.Collapse eventKey="1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Body>Hello! I'm another body</Card.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Accordion.Collapse>&nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; </Accordion>&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

您是否尝试过添加粗体 html 标签？<b> Click me! </b>&nbsp;<b></b>