Repository navigation
Global CSS included with component CSS import #4331
Description
Activity
Do you mean CSS rules like this?
html, body { ... }
Yes.
It's impossible not to import those CSS rules now.
Reacted by Joe Crozier, Kenneth Lin, Felixson Yusuf Tosin, Hans Piña, Enix, Jared Clifton-Lee, Duang, Kylin Chen, Ryan Warner, Quan Zai and 50 moreReacted by Peita Lin, little mice, Thomas Willheim, just, DennisDeng920525, Vadim V., michael hewson, remolueoend, Kat, Vaughan and 38 moreYou have to override these global styles now.
Or you drop the
styleoption ofbabel-plugin-import, import the less files indenpently.@import "~antd/lib/style/themes/default.less"; @import "~antd/lib/button/style/index.less";Reacted by Dave, Angie Zhang and traaReacted by Hans PiñaThat's terrible design though.
Reacted by Bo Chen, little mice, xiaojingzhao, Hack Hat, Thomas Willheim, Q, just, Yuan Chuan, LinboLen, Ethan and 114 moreReacted by A A Karim, Flávio Carvalho, Bryden Fogelman, Qin Guan, Junior Usca, yuvalhypr and mercteilThis 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.
Reacted by John Karahalis, So, Saren, Gal Tamir, Aaqib Rashid, Ivan Pasikun 🇺🇦, Mathieu, tjuenger, Mathias Piletti, Franck and 17 more@forestDev @peitalin it's an known issue, but we don't have enough time to solve this issue.
But we can keep discussing here.
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'
Reacted by afc163, Phillip Novess, Vadim V., Chen Fang, SHEN Lin, Hans Piña, Paul Myburgh, cbdeveloper, justin-init, 奔跑的大哈 and 4 moreReacted by Vadim V., Chen Fang and SHEN Linis there any update on this?
Reacted by Mr.Shahriar Shakil and FeritWe can discuss, but we have no time to apply any solution(if we can find) now.
I think this is a critical issue as not many people can afford importing a global css and having their existing styles overridden
Reacted by Hack Hat, Sam DeNicola, Thomas Willheim, Kevin Law, Q, Bill Sheikh, just, Yuan Chuan, Victor Miguez, Itamar Jobani and 88 moreReacted by Connie Ea, Bryden Fogelman, cbdeveloper and Adrian-Gabriel Manduc72 remaining items
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'Reacted by Kakaka HouI 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.
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.
Reacted by Khaled Mohamed@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.
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-NoCssPollutiono
npm install github:serguzest/ant-design#3.4.1-NoCssPollutionSolo 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
Reacted by Ahmet Ciftci, Rohyl Dwaine, smilexu and Junior UscaPeople 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-NoCssPollutionor
npm install github:serguzest/ant-design#3.4.1-NoCssPollutionI 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!
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...
Reacted by Renato Rukhi, 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.
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';Reacted by teranerveUnfortunately this is a show stopper. I will also not implement Antd even though the date picker is the best I could find so far.
Reacted by Ahmed FarahatWe 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.
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 getnext.jsto build, so in my case I just included a CND link in my header instead.It was 2020, humanity died out, coronavirus, ant-design adds global styles to the project...
- locked as too heated and limited conversation to collaborators
on Apr 24, 2020
Thanks for this great library!
I tried to use
babel-plugin-importto 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!