The issue here is the react-drawing-board package is overriding certain css styles on my project and I do not think this was an intended behavior.
Detailed descritption
I installed the react-drawing-board package into my project and noticed that a few elements had sudden changes of style, like font-size, font-color and margins.
Looking deeper into the issue I figured the problem was that these elements were having their styles overriden, much like a CSS reset/defaults stylesheet does (commonly used in design frameworks).
I found out there was a style-sheet being inserted by the lib that, if deleted (directly from the HTML inspector), made most of the elements go back to "normal", so I made some mock elements to represent the behavior I noticed and take some screenshots.
| \ |
without RDB installed |
with RDB installed |
| pics |
 |
 |
| details |
This is the expected behavior. We use a bit of cascading, specially when it comes to font-size and font color. In this example all text is red from the cascaded color, and font-size comes directly from the <body> tag |
This is after installing the react-drawing-board lib. There is some sort of style override that increases font-size, changes colors, adds margins and several other attributes using tag selectors. |
Styles used for testing:
I think that these styles are part of the antd lib, a dependency of both this package and an indirect dependency of the father package itself.
I also noticed that the drawing board is not affected by removing this default stylesheet.
| with default stylesheet |
without default stylesheet |
 |
 |
The issue here is the
react-drawing-boardpackage is overriding certain css styles on my project and I do not think this was an intended behavior.Detailed descritption
I installed the
react-drawing-boardpackage into my project and noticed that a few elements had sudden changes of style, like font-size, font-color and margins.Looking deeper into the issue I figured the problem was that these elements were having their styles overriden, much like a CSS reset/defaults stylesheet does (commonly used in design frameworks).
I found out there was a style-sheet being inserted by the lib that, if deleted (directly from the HTML inspector), made most of the elements go back to "normal", so I made some mock elements to represent the behavior I noticed and take some screenshots.
<body>tagreact-drawing-boardlib. There is some sort of style override that increases font-size, changes colors, adds margins and several other attributes using tag selectors.Styles used for testing:
I think that these styles are part of the
antdlib, a dependency of both this package and an indirect dependency of thefatherpackage itself.I also noticed that the drawing board is not affected by removing this
defaultstylesheet.