无法设置折叠样式(PrimeReact)

Question

我有一些来自PrimeReact的手风琴，我在我的代码中使用它们。但里面有照片，我想把它们变小。这就是当前的问题：

​

​

正如你所看到的，这幅图景太大了。我想将width设置为100%。

当我在PrimeNG中使用Angular (同样的库，只是用于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中设置图片样式？

感谢大家的帮助！

Answer 1

这很简单，你只需要对你的图像尺寸做一些实验，例如……增加高度和宽度(这在CSS中使用，与纯html类似，也可以在你的代码中使用)

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

谢谢你