- 在外层 React 应用中创建一个 CSS 文件，用于存放共用的样式代码。
- 在 iFramed React 应用的 index.html 文件中引入此 CSS 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iFramed React App</title>
<link rel="stylesheet" href="path/to/shared/styles.css">
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
- 在共用样式 CSS 文件中，添加对应模态框的样式，如 font、padding、margin、background 等。
- 在外层 React 应用中，通过修改样式的 className，来实现定制需求，如下所示：
import React from 'react';
import './App.css';
function App() {
return (
<div className="outer-app">
<iframe src="path/to/iFramed/React/App" className="iframe"></iframe>
</div>
);
}
export default App;
- 外层 React 应用的 CSS 样式代码如下所示：
.outer-app {
font-size: 16px;
padding: 20px;
margin: 40px;
background-color: #F5F5DC;
}
.iframe {
width: 100%;
height: 100%;
border: none;
}
- iFramed React 应用的 CSS 样式代码如下所示：
.modal-content {
font-size: 14px;
padding: 10px;
margin: 20px;
background-color: #F8F8FF;
border: 1px solid #D3D3D3;
}
- 当需要修改模态框的样式时，只需要在外层 React 应用的 CSS 文件中，修改对应的 className 对应
社区干货
特惠活动
在外层React应用中使用iFramedReact应用的模态框时，如何传递样式？
-优选内容
在外层React应用中使用iFramedReact应用的模态框时，如何传递样式？
-相关内容