當 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>
2 回答
幕布斯6054654
TA貢獻1876條經驗 獲得超7個贊
使用普通的內聯樣式就可以了
<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 回答
- 0 關注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消