如何使用 React 在 iframe 中编辑样式？

【问题标题】：How to I edit a style inside an iframe using React?如何使用 React 在 iframe 中编辑样式？
【发布时间】：2020-10-19 13:13:15
【问题描述】：

我需要在 React 组件中渲染一个 iframe，但想在其中隐藏一个元素。不过 iframe 的域是外部的。

有什么方法可以在 iframe 中注入自定义 CSS 并执行我需要的操作吗？

这是我的组件：

import React from 'react'

const ExampleComponent = () => {
  return ( <>
    <iframe src="https://app.sli.do/event/6ouwoyzr"></iframe>
  </> );
}
 
export default ExampleComponent;

还有我要注入的css：

app-header {
    display: none;
}

【问题讨论】：

标签： javascript html css reactjs iframe

【解决方案1】：

你应该jsx。你可以在iframe 标记内提供**className** attribiute，你可以在其中写一些jsx 代码，或者你可以创建类并在className 中提供它。例如：

style.css：

.Burger{
width:100px;
height:100px
}

反应文件：

import classesfrom 'your.css.file.path.css';

<iframe className={classes.Burger}>

您还可以查看此链接以了解其他方式来推动我们的组件样式： https://material-ui.com/styles/basics/

【讨论】：

我不想为 iframe 设置样式，我想在 iframe 中设置页面内容的样式。
也许你可以在 iframe 中创建其他自定义组件，你可以给它自定义 css。或者你可以包装 iframe 并配置它。