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

Global CSS included with component CSS import #4331

Closed
benthehenten opened this issue Dec 21, 2016 · 89 comments
Closed

Global CSS included with component CSS import #4331

benthehenten opened this issue Dec 21, 2016 · 89 comments

Comments

@benthehenten
Copy link

@benthehenten benthehenten commented Dec 21, 2016

Thanks for this great library!

I tried to use babel-plugin-import to do modular CSS imports, but along with the css for an individual component, there is a lot of global css being imported that interferes with my existing styles. Is it possible to import the CSS for an individual component without global CSS being included?

Thanks!

@benjycui
Copy link
Contributor

@benjycui benjycui commented Dec 22, 2016

Do you mean CSS rules like this?

html,
body {
  ...
}
@benthehenten
Copy link
Author

@benthehenten benthehenten commented Dec 22, 2016

Yes.

@benjycui
Copy link
Contributor

@benjycui benjycui commented Dec 22, 2016

It's impossible not to import those CSS rules now.

@afc163
Copy link
Member

@afc163 afc163 commented Dec 22, 2016

#1966 (comment)

You have to override these global styles now.


Or you drop the style option of babel-plugin-import, import the less files indenpently.

@import "~antd/lib/style/themes/default.less";
@import "~antd/lib/button/style/index.less";
@TheImpressionist
Copy link

@TheImpressionist TheImpressionist commented Apr 21, 2017

That's terrible design though.

@peitalin
Copy link

@peitalin peitalin commented Apr 25, 2017

This issue makes this library very difficult to work with. Especially having global properties on body etc. I think this issue should be made much more clear unless you have plans to change this.

@benjycui
Copy link
Contributor

@benjycui benjycui commented Apr 26, 2017

@forestDev @peitalin it's an known issue, but we don't have enough time to solve this issue.

But we can keep discussing here.

@benjycui benjycui reopened this Apr 26, 2017
@benjycui
Copy link
Contributor

@benjycui benjycui commented Apr 26, 2017

If we can import breaking changes, we can solve this issue. Such as, move styles in reset to components' styles:

Move:

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

To:

.ant-btn,
.ant-btn * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

And for backward compatibility, we can provide a standalone reset stylesheet.

import 'antd/styles/reset.less'
@bsheikh
Copy link
Contributor

@bsheikh bsheikh commented May 5, 2017

is there any update on this?

@benjycui
Copy link
Contributor

@benjycui benjycui commented May 8, 2017

We can discuss, but we have no time to apply any solution(if we can find) now.

@bochen2014
Copy link
Contributor

@bochen2014 bochen2014 commented May 12, 2017

I think this is a critical issue as not many people can afford importing a global css and having their existing styles overridden

@LogicMonsters
Copy link

@LogicMonsters LogicMonsters commented Jul 9, 2017

That is really annoying which stopped me from adopting Antd

@zpzxgcr
Copy link

@zpzxgcr zpzxgcr commented Aug 1, 2017

This will block many developers#

@baiyunchen
Copy link

@baiyunchen baiyunchen commented Sep 11, 2017

because ant can not compatible bootstarp,i had to give up using ant.

@LinPoLen
Copy link

@LinPoLen LinPoLen commented Sep 12, 2017

how about put out of less file into an independent library.

btw. I am trying

@afc163
Copy link
Member

@afc163 afc163 commented Sep 20, 2017

Related discussion: palantir/blueprint#244

@afc163 afc163 self-assigned this Sep 20, 2017
@afc163 afc163 mentioned this issue Sep 20, 2017
3 of 3 tasks complete
@afc163
Copy link
Member

@afc163 afc163 commented Sep 21, 2017

Hey guys, I am working on antd@3.0 and try to find a solution for global styles issue.

I tried the solution of import 'antd/styles/reset.less' from @benjycui. It turns out it would be a break change and make importing styles much more complicated, especially with babel-plugin-import. So I decide to pass it.

Then I find the main point of this issue is about babel-plugin-import which will turn code into:

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';   // It will import reset styles and hard to override it because it was imported lately!!!

The better workaround for this is not using style option of babel-plugin-import and import style manually.

@import '~antd/dist/antd.css';

// your global styles
body {
 ...
}

So I give up the whole reset.less idea and just remove the annoying reset codes like:

// unify the setting of elements's margin and padding for browsers
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin: 0;
padding: 0;
}
// Reset fonts for relevant elements
button,input,select,textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
ul,
ol {
list-style: none;
}

Also I added better typography code from bootstrap@v4 to resolve #6162

All updates are in #7682 now and will be merged into antd-3.0 soon.

@omnisci3nce
Copy link

@omnisci3nce omnisci3nce commented Jul 17, 2018

@paneq I've copied what you've done and it seems to be worked so far, but I haven't tried enough components to see which ones require that global css. Thanks

@cdskill
Copy link

@cdskill cdskill commented Jul 28, 2018

afc163 added a commit that referenced this issue Sep 2, 2018
Add explantion in docs (customize theme) to how to prevent global styles pollution by configuring webpabk.
Based on #4331 (comment)
@tylik1
Copy link

@tylik1 tylik1 commented Sep 21, 2018

hi, it should be possible to try match all elems, starting with .ant, and assign them styles

*[class^='ant-']{
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
}

It should have crossbrowser compatibility and shouldn't take long to implement.

@jaleikas
Copy link

@jaleikas jaleikas commented Oct 2, 2018

So we were able to get this working (at least so far) by using some webpack manipulation to load an alternate less file:

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

Where the src/style.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector:

#root { @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 #root scope:

Which version of less-loader are you using? Seems like it only works with 3.0.0? See. e.g. webpack-contrib/less-loader#184

Also, which version of antd were you using for this workaround? The reason I'm asking is that I didn't have success even with antd@3.7.3 and less-loader@3.0.0 (webpack had problems resolving after the change). ..

@axhamre
Copy link

@axhamre axhamre commented Oct 3, 2018

I don't know if this helps anyone, but the following helped me import the CSS for only the component in use:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

@jaleikas
Copy link

@jaleikas jaleikas commented Oct 3, 2018

I don't know if this helps anyone, but the following helped me import the CSS for only the component in use:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

Yeah, this seems to work ok for many components. Your milage may vary, though -- at least Select needs a little more than just the component's own styles. The "remove" icon in selections won't render otherwise; I didn't have time to track down the issue completely, but i's probably something minor. So you may need to mimic some styles from the main styles in some of the components.

While this option is not quite perfect, it could work well for many components. The custom styles are in risk of breaking with updates, but you can obviously control when you want to do your updates.

@kclonts
Copy link

@kclonts kclonts commented Oct 5, 2018

The best solution I found for our organization is to include the entire CSS sheet from antd, with any styles that affect non antd named styles stripped out. Mileage might vary, and there is obviously the downside of every style now being imported. But it works well and I haven't seen any issues after doing so for about two months now.

@renatoruk
Copy link

@renatoruk renatoruk commented Dec 12, 2018

@jaleikas
Have you found a workaround on this? As far as I can tell, the issue with less-loader@4.x is still not resolved and therefore the suggested fix with NormalModuleReplacementPlugin does not work. That solution actually seems like the best one since things can be manually overridden and scoped.
I tried the same thing as you, downgrading the less-loader, but then webpack resolve does not work.

Using antd@3.10.2 here.

@pedroas93
Copy link

@pedroas93 pedroas93 commented Dec 19, 2018

Las personas que sufren de esto pueden querer probar mi fork agregando el paquete directamente desde el repositorio

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

o

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

Solo descarté la base y la construí sin ninguna otra modificación. Funciona en mi caso, no uso muchos componentes de él. Probablemente se verá afectado por algunos componentes, especialmente si aún no tiene una hoja de estilo de restablecimiento razonable en su proyecto. # 4546

this works for me

@Trontor
Copy link

@Trontor Trontor commented Dec 31, 2018

People who are suffering from this might wanna try my fork by adding the package directly from the repository

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

or

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

I only ruled out base.less and built it without any other modifications. It works in my case, I don't use many components from it. It will probably break look of some components especially if you don't already have sane reset stylesheet in your project. #4546

Thank you for this solution!

@jaleikas
Copy link

@jaleikas jaleikas commented Dec 31, 2018

Have you found a workaround on this? As far as I can tell, the issue with less-loader@4.x is still not resolved and therefore the suggested fix with NormalModuleReplacementPlugin does not work. That solution actually seems like the best one since things can be manually overridden and scoped.

I chose to stop using antd, and decided to pick some unstyled components (like rc-switch). The problem is that most of the "unstyled" components are either horribly/not documented, and some of them also seem to behave differently, so for the most part, I gave up and looked elsewhere...

@dfeinzeig
Copy link

@dfeinzeig dfeinzeig commented Feb 19, 2019

hi, it should be possible to try match all elems, starting with .ant, and assign them styles

*[class^='ant-']{
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
}

It should have crossbrowser compatibility and shouldn't take long to implement.

@tylik1 , thank you! i just needed to fix the font-family to match the rest of my electron app. this totally saved me.

@lin-123
Copy link

@lin-123 lin-123 commented Dec 28, 2019

I don't know if this helps anyone, but the following helped me import the CSS for only the component in use:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

it work for me by the following.

import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';
@marijoo
Copy link

@marijoo marijoo commented Jan 9, 2020

Unfortunately this is a show stopper. I will also not implement Antd even though the date picker is the best I could find so far.

@ctrl-f5
Copy link

@ctrl-f5 ctrl-f5 commented Apr 8, 2020

We are currently searching for a react component library for our company and this is also a blocking issue for us, and we probably an not use ant because of it.

We are also looking at react MUI, which has great theming options, maybe you can have a look at how they do it and implement something similar.

@antonkatz
Copy link

@antonkatz antonkatz commented Apr 18, 2020

I used https://www.npmjs.com/package/patch-package to comment out

// import 'normalize.css/normalize.css';

from antd-mobile/es/style/index.js.
My purpose was to get next.js to build, so in my case I just included a CND link in my header instead.

@CuteShaun
Copy link

@CuteShaun CuteShaun commented Apr 24, 2020

It was 2020, humanity died out, coronavirus, ant-design adds global styles to the project...

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Apr 24, 2020

Tracking in #9363

@ant-design ant-design locked as too heated and limited conversation to collaborators Apr 24, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet