Javascript 使用材料界面<；隐藏>；使用React生命周期方法导致错误的API

我在用React生命周期方法使用material ui Hidden API时遇到了一些错误

背景： 我正在用React，Next，Cosmic建立一个博客。 来自cosmicJS的帖子内容通过危险的HTML插入

为了从CosmicJS中设计组件的样式

componentDidMount() {
const imgs = document.getElementsByClassName('fr-fic');
Array.from(imgs).map( img => {
  img.style.width = '100%';
  img.style.height = 'auto';
});
const videos = document.getElementsByTagName('iframe');
Array.from(videos).map((video) => {
  video.style.position = 'relative';
  video.style.top = 0;
  video.style.left = 0;
  video.style.width = '100%';
  video.style.height = 360;
});

然后使用隐藏API生成响应页面。出于某种原因，隐藏API通过componentDidMount（）导致组件的样式设置出现问题。 在我的例子中，在博客文章结束（页面结束）时，将呈现一篇新文章。只有在呈现新帖子时，上述样式才会生效

<Hidden mdUp>
  <div className={this.classes.mobilepost_content} dangerouslySetInnerHTML={this.renderMarkup(this.articleContent)} />
</Hidden>
<Hidden smDown>
  <div className={this.classes.deskpost_content} dangerouslySetInnerHTML={this.renderMarkup(this.articleContent)} />
</Hidden>

有什么建议吗