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

Cascade Layers support #644

Open
tim-richter opened this issue May 7, 2024 · 3 comments
Open

Cascade Layers support #644

tim-richter opened this issue May 7, 2024 · 3 comments

Comments

@tim-richter
Copy link

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Since antd introduced a way to apply cascade layers to their styles (https://ant.design/docs/react/compatible-style#layer-downgrade), I was wondering, if we could support this for the icons as well.

Currently all of the injected styles from this library would have a higher specificity, then antd styles, if used together with layer. This could cause specificity issues in the long run.
It would also make it easier for antd users, to use icons in their projects, if those would automatically get the same specificity layer as antd styles.

I could see two possible solutions to this:

  • Letting the IconContext set this for all icons and then using the context to conditionally wrap the iconStyles with the antd layer (probably easiest to do)
  • Applying the styles from this repo via @ant-design/css-in-js. Since we have to set layer already on the @ant-design/css-in-js, this should make sure the layer is also applied to the icons as well.

Let me know which solutions would work best and if I can help with any of those.

@skycrazyk
Copy link

skycrazyk commented May 24, 2024

There is already problem with icons when using @layer. @ant-design/icons has more specific styles and overrides antd styles.

I reproduced the problem on stackblitz https://stackblitz.com/edit/vitejs-vite-cdw4gw?file=src%2FApp.tsx

image

image

@tim-richter
Copy link
Author

@vagusX @MadCcc @afc163 Sorry for tagging here, but thanks to the reproduction from @skycrazyk, I guess there are already specificity problems with the icons library, and I think this should be fixed rather sooner than later.

@Hourglasser23
Copy link

Hourglasser23 commented Jul 11, 2024

This is still problem with in 5.3.7 @ant-design/icons. Icons are black even though they should by colored by css-in-js provided @layer solution.

Tried patching the package and remove var iconStyles in utils.js, but it has not desired side effects (as loader icon not loading,...) https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/utils.ts (LN100).
Better solution was to add @layer antd before all classes but these styles (without my patch) got injected from different part of code or by styling provider.

Any update on proper fix on package level? Thanks so much

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants