search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
435 stars 97 forks source link

[ObjectStatus]: Styling ObjectStatus with className is not working #6276

Closed sadie100 closed 1 week ago

sadie100 commented 2 weeks ago

Describe the bug

It looks like ObjectStatus is negating any css style effects applied through className.

When I look at the @ui5-webcomponents-react repository, I see the normalizeCSS class applied to ObjectStatus, and it feels like its all: unset; rule is overriding all the effects of the other classes. (When I turned off that rule through the developer tools, the class style worked as intended. I added that screen record below)

If this is not what you intended, I wonder if you could change the implementation so that the developer's class styling has a higher priority. I've heard that this can be adjusted via CSS rules like @layer, although I've never tried it.

Isolated Example

https://stackblitz.com/edit/github-xalxp5?file=src%2FApp.tsx

Reproduction steps

  1. Add custom class ruleset to project's CSS file
  2. Give ObjectStatus the class name I determined in step 1

Expected Behaviour

I expected ObjectStatus to have style I defined in CSS

Screenshots or Videos

objectstatus_normalizeCSS

UI5 Web Components for React Version

Our project has 1.28.1, but I found 2.0.1 StackBlitz example has same problem

UI5 Web Components Version

Our project : 1.24.2, StackBlitz : 2.1.2

Browser

Chrome

Operating System

mac Sonoma 14.3

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 2 weeks ago

Hi @sadie100

Thanks for creating this issue. Overriding styles should be approached with caution, as it can lead to undesired behavior, such as affecting internal CSS for positioning, theming, or accessibility capabilities.

However, if you're heavily relying on custom styling, we currently recommend using our static CSS bundles. This allows you to control the injection order of the stylesheets (see here).

Example: https://stackblitz.com/edit/github-xalxp5-7wnmok?file=src%2Fmain.tsx,src%2FApp.tsx,src%2Findex.css

If you only need to override styles in specific places, using a selector with higher specificity can also do the trick: https://stackblitz.com/edit/github-xalxp5-zsfbbw?file=src%2FApp.tsx,src%2Findex.css

The @layer rule looks promising, so we'll definitely look into it. Thank you for bringing it up!

ui5-webcomponents-react-bot commented 1 week ago

:tada: This issue has been resolved in version v2.1.0 :tada:

The release is available on v2.1.0

Your semantic-release bot :package::rocket: