mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-12 20:43:11 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Explain how to prevent global styles pollution

Browse Source 
Add explantion in docs (customize theme) to how to prevent global styles pollution by configuring webpabk.
Based on https://github.com/ant-design/ant-design/issues/4331#issuecomment-391066131
This commit is contained in:
Arnaud Benhamdine 2018-08-28 15:33:35 +02:00 committed by 偏右
parent 43c1bb646d
commit 10c866d10c
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/react/customize-theme.en-US.md
View File

@ -98,6 +98,27 @@ Another approach to customize theme is creating a `less` file within variables t
Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working. Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
## How to avoid modifying global styles ?
Currently ant-design modify is designed as a whole experience and modify global styles (eg `body` etc).
If you need to integrate ant-design as a part of a website, perhaps you would want to prevent ant-design to override global styles.
While there's no canonical way to do it, you can take one of the following paths :
### Configuring webpack to scope less files
It's possible to configure webpack to load an alternate less file:
```ts
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') ),
Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector:
#antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }
```
The result is that all of the "global" styles are being applied with the #antd scope:
## Not working? ## Not working?
You must import styles as less format. A common mistake would be importing multiple copied of styles that some of them are css format to override the less styles. You must import styles as less format. A common mistake would be importing multiple copied of styles that some of them are css format to override the less styles.