-
Notifications
You must be signed in to change notification settings - Fork 413
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
Fix leaking antd global CSS rules #19
Fix leaking antd global CSS rules #19
Conversation
Ant design imports some global CSS styles in its library index. This means that all library users importing directly from ant design's root, e.g. "import {} from 'antd'", will include these global reset styles. This commit does its best to avoid polluting global rules by 1. avoiding imports from ant design's package root when possible, 2. implementing special build processes for development and library builds which preface ant design's global styles.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. Thanks for taking care of this. Hopefully, this will get merged rather sooner than later,
@StephenChou1017 Please consider merging this quickly. Currently, react-big-scheduler is unusable because it intrusively changes your entire site's styling. |
OK, I'll try to merge this, I haven't merged this for @Jokinen said he didn't proof this approach:-) |
@Jokinen I've merged your code, thanks for your pr:-) |
Np, glad if I could help 👏 |
@Jokinen I wanna to find out how to use the Scheduler component in the following two cases:
If I add |
Hi! I don’t have the means to test it out rigth now, but I think that if you include that statement, the global styles will get included for everyone using your library 🙂 In essence, RBS should always be styled correctly whether antd is used or not. If not, then these faults should be considered as bugs. Note that the application surrounding RBS would not be styled correctly. Any major styling errors which are caused by missing In case 1 BUT, you shouldn’t need to do that to make RBS work! In case 2 I’m not actually sure which things are not correct in the screencap! 😄 Should the scroll bars be hidden? |
@Jokinen In the screencap, the table is abnormal. |
@Jokinen @adeacetis @tgBryanBailes |
I am using Antd Pro 2.0, and leaking the global css umi.css also. Without |
I am using Antd Pro 2.0, and it seems normal. I use antd@3.11.6 and react-big-scheduler@0.2.5 in pro. |
I found "npm run build" is ok, but in develop mode "npm start" will missing umi.css. thanks you @StephenChou1017 |
Ant design imports some global CSS styles in its library index. This
means that all library users importing directly from ant design's root,
e.g. "import {} from 'antd'", will include these global reset styles.
This commit does its best to avoid polluting global rules by
builds which preface ant design's global styles.
This is a somewhat hacky fix, but maybe it can act as a starting point. I needed some way to stop the global styles from leaking for one of our projects.
What I've done is
antd
directlyantd
"core" styles with an idantd
core styles and adds an import statement for those inlib/index.js
RBS-Scheduler-root
id for the<Scheduler />
componentI haven't had time to proof this approach much so I don't know how valid it is. I didn't implement a webpack build for production as it would bundle all the files which could be problematic(?). Instead I've only added a step to the current process, but it's still a rather big change.
#20