Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

引入ng-zorro-antd后,全局样式冲突。 #341

Closed
printjs opened this issue Sep 20, 2017 · 14 comments
Closed

引入ng-zorro-antd后,全局样式冲突。 #341

printjs opened this issue Sep 20, 2017 · 14 comments

Comments

@printjs
Copy link

printjs commented Sep 20, 2017

I'm submitting a...


[ ] Bug report  
[*] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

引入ng-zorro-antd后全局样式冲突

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgZorroAntdModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Expected behavior

样式全部加载到style标签里面。无法提取到css里面,无法重写覆盖样式

Environment


Angular version: 4.2.4

ng-zorro-antd version: 0.5.1

Browser:
- [ *] Chrome (desktop) version new
- [ *] Firefox version new
- [ *] Safari (desktop) version new
- [ *] IE version new
 
For Tooling issues:
- Node version:6.10.2  
- Platform:  

Others:

@ghost
Copy link

ghost commented Sep 20, 2017

wx20170920-180109 2x

This is my desperation solution.In special cases, if an attribute is not defined in the ng-zorro-antd, then '!improtant' is not necessary.If you have a better solution,please tell me🤦🏻‍♂️

@vthinkxie
Copy link
Member

duplicated #202 , you can just overwrite all style over your css file.

@printjs
Copy link
Author

printjs commented Sep 21, 2017

@zy-dreamer @vthinkxie 请注意,zorro的样式再webpack下会放到页面的style标签下,我重写的样式再css下面。优先级导致我覆盖不到。有什么方法可以将zorro的样式提取出来嘛?

@vthinkxie
Copy link
Member

vthinkxie commented Sep 21, 2017

@wjtgithub
All ant styles are css in js, the style will only work when you import zorro module, and css file can not import separated with current design.

@printjs
Copy link
Author

printjs commented Sep 21, 2017

在生产环境下,必须把css抽离于js,但是,antd的样式始终在style标签下,导致我重写的样式无法覆盖antd的样式。何解?@vthinkxie

@vthinkxie
Copy link
Member

@wjtgithub you can overwrite all style like @zy-dreamer .

@printjs
Copy link
Author

printjs commented Sep 21, 2017

像下图的样式,我无论如何也重写不掉
image
因为我重写得样式再css里面,而antd的在style里面
@vthinkxie

@vthinkxie
Copy link
Member

@wjtgithub use important

@printjs
Copy link
Author

printjs commented Sep 21, 2017

@vthinkxie 我不认为这是一个好的办法,我觉得zorro应该改进这部分。非常感谢你的解答,我心里已经有谱了。

@ghost
Copy link

ghost commented Sep 21, 2017

@vthinkxie
Copy link
Member

vthinkxie commented Sep 21, 2017

@wjtgithub just a trade-off, it is impossible to support both style lazy load and style customization.

@printjs
Copy link
Author

printjs commented Sep 21, 2017

@zy-dreamer 谢谢

@printjs
Copy link
Author

printjs commented Sep 21, 2017

不支持样式定制就无法满足产品的UI需求 @vthinkxie

@lock
Copy link

lock bot commented Feb 19, 2019

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

@lock lock bot locked as resolved and limited conversation to collaborators Feb 19, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants