📝 polish antd prefix doc (#998)
This commit is contained in:
parent
f88799ee28
commit
1564131771
|
|
@ -165,6 +165,7 @@ There are mainly the following solutions:
|
|||
.end()
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
3. Use the `file-loader` of `webpack` to inject the full path when packaging it (suitable for projects with large font files and images)
|
||||
|
||||
|
|
@ -337,6 +338,36 @@ See [Enable Nginx Cors](https://enable-cors.org/server_nginx.html).
|
|||
|
||||
Qiankun will isolate stylesheet between your sub apps automatically, you can manually ensure isolation between master and child applications. Such as add a prefix to all classes in the master application, and if you are using [ant-design](https://ant.design), you can follow [this doc](https://ant.design/docs/react/customize-theme) to make it works.
|
||||
|
||||
Example for antd:
|
||||
|
||||
1. use webpack to modify antd less variable
|
||||
|
||||
```diff
|
||||
{
|
||||
loader: 'less-loader',
|
||||
+ options: {
|
||||
+ modifyVars: {
|
||||
+ '@ant-prefix': 'yourPrefix',
|
||||
+ },
|
||||
+ javascriptEnabled: true,
|
||||
+ },
|
||||
}
|
||||
```
|
||||
|
||||
2. set antd [ConfigProvider](https://ant.design/components/config-provider-cn/)
|
||||
|
||||
```jsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
export const MyApp = () => (
|
||||
<ConfigProvider prefixCls="yourPrefix">
|
||||
<App />
|
||||
</ConfigProvider>
|
||||
);
|
||||
```
|
||||
|
||||
Detailed documentation pls check [antd official guide](https://ant.design/docs/react/customize-theme).
|
||||
|
||||
## How to make sub app to run independently?
|
||||
|
||||
Use the builtin global variable to identify the environment which provided by qiankun master:
|
||||
|
|
@ -505,7 +536,7 @@ router.beforeEach((to, from, next) => {
|
|||
-Both the main application and the micro application are in the `hash` mode. The main application judges the micro application based on the `hash`, so this issue is not considered.
|
||||
|
||||
-The main application judges the micro application based on the `path`
|
||||
|
||||
|
||||
It is not possible to directly use the routing instance of the micro-application to jump between micro-applications in the `history` mode or to jump to the main application page. The reason is that the routing instance jumps of the micro-application are all based on the `base` of the route. There are two ways to jump:
|
||||
|
||||
1. `history.pushState()`: [mdn usage introduction](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState)
|
||||
|
|
|
|||
|
|
@ -405,6 +405,35 @@ start({
|
|||
|
||||
qiankun 将会自动隔离微应用之间的样式(开启沙箱的情况下),你可以通过手动的方式确保主应用与微应用之间的样式隔离。比如给主应用的所有样式添加一个前缀,或者假如你使用了 [ant-design](https://ant.design) 这样的组件库,你可以通过[这篇文档](https://ant.design/docs/react/customize-theme)中的配置方式给主应用样式自动添加指定的前缀。
|
||||
|
||||
以 antd 为例:
|
||||
1. 配置 webpack 修改 less 变量
|
||||
|
||||
```diff
|
||||
{
|
||||
loader: 'less-loader',
|
||||
+ options: {
|
||||
+ modifyVars: {
|
||||
+ '@ant-prefix': 'yourPrefix',
|
||||
+ },
|
||||
+ javascriptEnabled: true,
|
||||
+ },
|
||||
}
|
||||
```
|
||||
|
||||
2. 配置 antd [ConfigProvider](https://ant.design/components/config-provider-cn/)
|
||||
|
||||
```jsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
export const MyApp = () => (
|
||||
<ConfigProvider prefixCls="yourPrefix">
|
||||
<App />
|
||||
</ConfigProvider>
|
||||
);
|
||||
```
|
||||
|
||||
详细文档参考 [antd 官方指南](https://ant.design/docs/react/customize-theme)。
|
||||
|
||||
## 如何独立运行微应用?
|
||||
|
||||
有些时候我们希望直接启动微应用从而更方便的开发调试,你可以使用这个全局变量来区分当前是否运行在 qiankun 的主应用的上下文中:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user