DB UI overrides font style of non db-ui components

[robruh]

Which generators are impacted?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

It seems that the css from db-ui (@db-ui/components/build/styles/db-ui-42.css or any other) overrides our fonts of non db-ui components. I also tried other db-ui css to solve the problem with the fonts, but either certain styles were missing or the fonts were also overwritten. Additionally, we are using a font in our project that is also used in the DB UI.

Expected Behaviour

Our fonts in non db-ui components are not being overwritten by the db-ui css.

Screenshots

I cannot provide screenshots for privacy reasons.

Browser version

None

Add any other context about the problem here.

No response

[nmerget]

@robruh thanks for your feedback.

Currently, we provide a required file that sets the default font size to the root and inherits all the font size for all components. We do this to make sure that all HTML tags like p, a, and also input or button will use the correct font size + line height.

We bundle everything inside db-ui-42.css for a quick start. If you need some customization you can check this. It describes how to split the db-ui-42.css. Basically, you shouldn't include @db-ui/foundations/build/css/init/required.css or at least not every line.

Another option would be to keep the db-ui-42.css and overwrite your non db-ui-components like this.

[mfranzke]

@robruh is this a viable solution for you and/or do you have some other suggestion or solution in mind ?