无法设置手风琴样式（PrimeReact）

Question

I have some accordions from PrimeReact which I use in my code. But there are pictures inside and I want to make them smaller. This is the current problem:

As you can see, the picture is way too big. I want to set the width to 100% .

Now I did this already before when I used Angular with PrimeNG (same library, just for Angular) and I managed to this in the css file like:

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

This code did exactly what I wanted.

Now I need the same for React. But it is not working when I use:

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

This is the code I used to create the accordions. Maybe it will help:

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

Does anyone know what I did wrong? How can I style the picture inside the accordionTab?

Thanks for every help!

Answer 1

this is easy you just need to do some experiments with your image dimensions for example... add height along with width(this is used in CSS with pure html similar can be used in your code also)

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

thankyou