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

CSS overriding the style of block tool SVG component #2294

Open
siddarthvader opened this issue Mar 3, 2023 · 3 comments · May be fixed by #2826
Open

CSS overriding the style of block tool SVG component #2294

siddarthvader opened this issue Mar 3, 2023 · 3 comments · May be fixed by #2826

Comments

@siddarthvader
Copy link

There is a css rule in file ui.css, which goes like this...

path { stroke: currentColor; }

Now this rule is fairly innocent but when you have some SVG component as a Block tool, in my case, I am rendering Echarts as a block tool which uses SVG. Then this rules completely overtakes the styles of my svg->path element. Check this image below.


Screenshot 2023-03-03 at 6 04 03 PM

For this SVG, the stroke gets overridden by editor.js style...

Screenshot 2023-03-03 at 6 09 30 PM

This happens because SVGs style precendence works bit differently, Link

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.

There is no way to override this behaviour, So I am suggesting if ui.css style could be bit scoped, then this issue could be avoided.

Thanks in advance guys, up and up

@siddarthvader siddarthvader changed the title SVG->Path CSS overriding the CSS of block tool SVG component CSS overriding the style of block tool SVG component Mar 3, 2023
@Vickyaryan33
Copy link

I want to work on this issues please assign me this issues

@siddarthvader
Copy link
Author

siddarthvader commented Mar 16, 2023

I cant assign it to you, i don't have permissions. Seems like nobody has taken notice of this :/ @Vickyaryan33

@Dxuian
Copy link

Dxuian commented Sep 9, 2024

i believe i've managed to fix the issue pls test on your end

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

Successfully merging a pull request may close this issue.

4 participants