[英]Unable to style Accordion (PrimeReact)
我在我的代碼中使用了一些來自 PrimeReact 的手風琴。 但是里面有圖片,我想把它們變小。 這是當前的問題:
如您所見,圖片太大了。 我想將width
設置為100%
。
現在,當我將 Angular 與 PrimeNG(相同的庫,僅用於 Angular)一起使用時,我已經這樣做了,並且我在 css 文件中做到了這一點,例如:
:host ::ng-deep .p-accordion-content img {
width: 100%;
}
這段代碼完全符合我的要求。
現在我需要同樣的 React。 但是當我使用時它不起作用:
:host .p-accordion-content img {
width: 100%;
}
這是我用來創建手風琴的代碼。 也許它會有所幫助:
createAccordions = () => {
const allFAQs = this.state.allFAQs;
let accordions = [];
for (const faq of allFAQs) {
const accordion = <AccordionTab key={faq.uuid} header={faq.question}><div dangerouslySetInnerHTML={{ __html: faq.answer }}></div></AccordionTab>;
accordions.push(accordion);
}
return accordions;
}
render() {
return (
<div>
<div className="p-grid">
<div className="p-col-3">
</div>
<div className="p-col-6">
<Accordion>
{this.createAccordions()}
</Accordion>
</div>
<div className="p-col-3">
</div>
</div>
</div>
)
}
有誰知道我做錯了什么? 如何設置 accordionTab 內圖片的樣式?
感謝您的幫助!
這很容易,你只需要對你的圖像尺寸做一些實驗,例如......添加高度和寬度(這在 CSS 中使用,純 html 類似也可以在你的代碼中使用)
:host .p-accordion-content img {
width: 100%;
height: auto;
}
謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.