Блог

У меня есть несколько аккордеонов от PrimeReact, которые я использую в своем коде. Но внутри есть картинки, и я хочу сделать их меньше. Это и есть нынешняя проблема:

Как вы можете видеть, картина слишком велика. Я хочу установить width это на 100% .

Теперь я уже делал это раньше, когда использовал Angular с PrimeNG (та же библиотека, только для Angular), и мне удалось сделать это в файле css, например:

 :host ::ng-deep .p-accordion-content img {
  width: 100%;
}
 

Этот код сделал именно то, что я хотел.

Теперь мне нужно то же самое для реакции. Но это не работает, когда я использую:

 :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>
    )
}
 

Кто-нибудь знает, что я сделал не так? Как я могу оформить изображение внутри таблицы аккордеона?

Спасибо за любую помощь!

это легко, вам просто нужно провести некоторые эксперименты с размерами вашего изображения, например… добавить высоту вместе с шириной(это используется в CSS с чистым html, аналогично можно использовать и в вашем коде).

 :host .p-accordion-content img {
  width: 100%;
  height: auto;
}
 

спасибо