Global CSS included with component CSS import

[benthehenten]

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]

Do you mean CSS rules like this?

html,
body {
  ...
}

[benthehenten]

Yes.

[benjycui]

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

[afc163]

#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";

[DogAndHerDude]

That's terrible design though.

[peitalin]

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]

@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]

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]

is there any update on this?

[benjycui]

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

[bchenSyd]

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

[LogicMonsters]

That is really annoying which stopped me from adopting Antd

[zpzxgcr]

This will block many developers#

[baiyunchen]

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

[LinboLen]

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

btw. I am trying

[afc163]

Related discussion: palantir/blueprint#244

[afc163]

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:

ant-design/components/style/core/base.less

Lines 33 to 50 in afce275

	// 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]

@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]

@vthinkxie

[tylik1]

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.

[scleikas]

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]

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'

[scleikas]

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]

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]

@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]

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]

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!

[scleikas]

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]

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]

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]

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]

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]

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]

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

[yoyo837]

Tracking in #9363