codex-team / codex-team/editor.js

CSS overriding the style of block tool SVG component

Open
#2,294 3 comments 0 reactions 0 assignees View on GitHub
good first issue important
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

There is a css rule in file [ui.css](https://github.com/codex-team/editor.js/blob/7bd5c53ab27defac388666d80e75606cd15ab07e/src/styles/ui.css#L107), 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](https://user-images.githubusercontent.com/7977737/222721623-4b267294-b953-4ae6-aa8f-ca629f54393e.png)
](url)

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

![Screenshot 2023-03-03 at 6 09 30 PM](https://user-images.githubusercontent.com/7977737/222722587-a4c58262-a094-4012-9f72-90e06fa575f7.png)

This happens because SVGs style precendence works bit differently, [Link](https://stackoverflow.com/a/47088443/2439835)

> 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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.