ui5-webcomponents-react icon indicating copy to clipboard operation
ui5-webcomponents-react copied to clipboard
verified publisher icon SAP

[SF][Text]: external styles not working on Text components

Open ksblklu opened this issue 1 year ago • 3 comments

Describe the bug

When we add css styles through className property of Text component, the added styles are overridden by Text internal styles.

Isolated Example

https://stackblitz.com/edit/github-fwkd41-detgpv

Reproduction steps

  1. Go to stackblitz exmaple.
  2. Inspect the text element with styles added.
  3. See the added styles are overridden by internal styles.

Expected Behaviour

External styles should work properly on Text component.

Screenshots or Videos

image

UI5 Web Components for React Version

1.26.0

UI5 Web Components Version

1.23.1

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

  • [X] I’m not disclosing any internal or sensitive information.

ksblklu avatar Mar 13 '24 06:03 ksblklu

Hi @ksblklu

many of our components are still using react-jss for styling. Since these sources are created after css modules, they have precedence. We're currently in the process of refactoring all components to use css modules, but since this has not a high priority for us and "base" components like Text need to be the last components to be updated, it's best if you use a selector with a higher specificity (example).

Please also note that although we offer a way to overstyle components, internal styles are not subject to semantic versioning. So they can change without notice, which can lead to strange behavior when overstyling components without proper visual tests.

Lukas742 avatar Mar 13 '24 06:03 Lukas742

Hi @Lukas742 Thanks for the information, I'll use higher priority selectors to override the component styles as temporary solution.

ksblklu avatar Mar 13 '24 07:03 ksblklu

Great :)

We'll keep the issue open until the Text is using css modules as well.

Lukas742 avatar Mar 13 '24 10:03 Lukas742

Hi @ksblklu

with v1.28.0, you can now more easily override internal styles of @ui5/webcomponents-react components. You can find more information about this here.

Please note, that if you're using Vite, to not import the static files inside the main.tsx file, as they would then be added last and therefore would override styles with the same specificity. Example

Lukas742 avatar Apr 19 '24 12:04 Lukas742