问题出在你用了Angular特有的:host伪类，这个在React环境里是不生效的。React没有类似Angular组件样式隔离里的:host概念，所以你的CSS选择器根本匹配不到目标元素。下面给你几种可行的解决方案，按推荐程度排序：

方案1：给回答内容的容器加自定义类（最推荐） #

这种方式不会污染全局样式，只针对当前FAQ的图片生效。

首先修改createAccordions里的代码，给包裹dangerouslySetInnerHTML的div加一个自定义类名：

createAccordions = () => { 
  const allFAQs = this.state.allFAQs; 
  let accordions = []; 
  for (const faq of allFAQs) { 
    // 给div添加className="faq-answer-content"
    const accordion = <AccordionTab key={faq.uuid} header={faq.question}>
      <div className="faq-answer-content" dangerouslySetInnerHTML={{ __html: faq.answer }}></div>
    </AccordionTab>; 
    accordions.push(accordion); 
  } 
  return accordions; 
}

然后在你的CSS文件里添加以下样式：

.faq-answer-content img {
  width: 100%;
  /* 可选：如果需要限制高度，添加max-height或者object-fit */
  /* object-fit: contain; */
}

这个方法之所以生效，是因为.faq-answer-content是你自己定义的元素，样式可以正常渗透到它内部的所有子元素（包括dangerouslySetInnerHTML生成的图片），完全避开了PrimeReact组件的样式隔离问题。

方案2：给Accordion加自定义类，全局样式穿透 #

如果你想直接针对Accordion组件的内容区域设置样式，可以给外层Accordion加自定义类，然后写全局样式：

修改render里的Accordion：

<Accordion className="custom-faq-accordion">
  {this.createAccordions()}
</Accordion>

然后添加CSS：

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

这种方式比直接写全局.p-accordion-content img更安全，只会影响带有custom-faq-accordion类的Accordion组件，不会干扰页面上其他PrimeReact Accordion。

方案3：直接修改HTML字符串中的图片样式 #

如果不想额外写CSS，可以在渲染前修改faq.answer的HTML内容，给所有图片添加内联样式：

createAccordions = () => { 
  const allFAQs = this.state.allFAQs; 
  let accordions = []; 
  for (const faq of allFAQs) { 
    // 正则替换所有img标签，添加width:100%的内联样式
    const processedAnswer = faq.answer.replace(/<img([^>]*)>/g, '<img$1 style="width:100%;" />');
    const accordion = <AccordionTab key={faq.uuid} header={faq.question}>
      <div dangerouslySetInnerHTML={{ __html: processedAnswer }}></div>
    </AccordionTab>; 
    accordions.push(accordion); 
  } 
  return accordions; 
}

这个方法不需要依赖CSS，直接修改HTML内容，但如果原HTML里的图片已经有style属性，需要调整正则表达式来追加样式（比如把style="width:100%;"改成style="$2; width:100%;"，并修改正则捕获组）。

为什么之前的方法不生效？ #

• :host是Angular框架特有的伪类，用于选择组件的宿主元素，React生态中没有这个概念，所以你的选择器完全无效。
• 即使去掉:host，如果你的CSS是模块化的（比如使用CSS Modules），.p-accordion-content会被编译成带哈希的唯一类名，无法匹配PrimeReact组件自带的类名，导致样式不生效。

内容的提问来源于stack exchange，提问作者IonicMan