簡體   English   中英

無法設置手風琴樣式(PrimeReact)

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM