Styling.mdx

import { Footer, TableOfContent } from '@sb/components'; import { Meta } from '@storybook/addon-docs/blocks'; import { MessageStrip, ThemeProvider } from '@ui5/webcomponents-react'; import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js'; import { CssPartsExample } from '../styling/CssPartsExample'; import { MyCustomElement } from '../styling/MyCustomElement';

Styling

Styling UI5 Web Components (for React) components

UI5 Web Components for React follows the same styling approach as the core UI5 Web Components. You can apply CSS variables, use the ::part pseudo-element selectors, or apply styles directly on selected components (e.g. Button, Title, Input, etc. ) as described in the linked documentation.

Components currently only available in the ui5/webcomponents-react repo, are not necessarily web components. For these kind of components you can follow the standard styling approach of React.

Scrollbars

@ui5/webcomponents components come with globally applied scrollbar styles. If you want to opt-out of this behavior, you can add the .ui5-content-native-scrollbars class to the body of the page. You can find out more about this in the ui5/webcomponents documentation.

Forced Colors Mode

In forced colors mode (e.g. Windows High Contrast), the user agent automatically overrides component colors to meet accessibility needs. If you need to opt out of this behavior for specific elements, you can use the forced-color-adjust CSS property:

html {
  forced-color-adjust: none;
}

By setting forced-color-adjust to none, the element's colors will not be adjusted by the user agent in forced colors mode. You can also scope this to individual components instead of the entire page. Wrapping the rule in a @media (forced-colors: active) query is functionally equivalent, but makes the intent more explicit in your code:

@media (forced-colors: active) {
  .myComponent {
    forced-color-adjust: none;
  }
}

Changing CSS Variables

You can override SAP theming CSS variables on specific web component selectors to customize their appearance:

[ui5-button] {
  --sapButton_TextColor: purple;
}

Style your own components

When building custom components, use SAP CSS variables directly to stay consistent with the Fiori design system. A full list of all supported CSS variables can be found in the theming-base-content repo.

import './MyCustomElement.css';

export const MyCustomElement = () => {
  return (
    <div className="containerCustomElement">
      <span style={{ color: 'var(--sapNegativeColor)', fontSize: 'var(--sapFontLargeSize)' }}>My Text</span>
    </div>
  );
};

.containerCustomElement {
  background-color: var(--sapBackgroundColor);
  font-family: var(--sapFontFamily);
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

If you need to access CSS variable values in JavaScript, you can use ThemingParameters as well:

<span style={{ color: ThemingParameters.sapNegativeColor, fontSize: ThemingParameters.sapFontLargeSize }}>My Text</span>

This would then be the result:

Applying styling via className or style

Almost all components allow setting className or style for custom styling. For standard elements like div, span, etc., you can easily override internal CSS properties and values, as our styles are encapsulated in a CSS layer. For web components, this does not mean that styles are inherited by shadow root elements per default. Only inherited CSS properties that are not set inside the shadow root or internally passed properties will change the styles of the internal elements. Another special case are abstract components like the SuggestionItem. The ui5-suggestion-item element is mainly there to pass props to the actual component inside the shadow root and is therefore not stylable.

Explicitly import CSS bundles

By default, the ThemeProvider injects the CSS of the components during runtime. If you want to import the CSS bundles explicitly, you can set the staticCssInjected prop to true. This approach provides you with control over the order in which CSS files are injected, making it easier to override styles.

Please note that the static CSS is not wrapped inside a CSS layer. You can use the @import CSS at-rule to achieve that.

• main package import: import '@ui5/webcomponents-react/styles.css'
• charts package import: import '@ui5/webcomponents-react-charts/styles.css'

CSS Shadow Parts

When using web components like the Card, you will sometimes see a "CSS Shadow Parts" section. One of the main advantages of the shadow root is encapsulation of parts of the DOM and styles, but since it could still be necessary for some elements to be adjusted even though they're inside the shadow root, the ui5-webcomponents offer a way to customize CSS of selected elements by attaching the part attribute. With the help of this attribute it's possible styling the respective element, by using the ::part pseudo-element.

Example

Details

{' '}

Show Code

.card::part(root) {
  background-color: lightgreen;
}
.card::part(content) {
  transform: rotate(180deg);
}

function MyComponent() {
  return (
    <Card
      header={
        <CardHeader
          additionalText="3 of 5"
          avatar={<Icon name="person-placeholder" />}
          subtitleText="Direct Reports"
          titleText="TeamSpace"
        />
      }
      className="card"
    >
      <List>
        <ListItemStandard description="Software Architect" text="Richard Wilson" />
        <ListItemStandard description="Visual Designer" text="Elena Petrova" />
        <ListItemStandard description="Quality Specialist" text="John Miller" />
      </List>
    </Card>
  );
}

CSS Custom States

Some components expose custom states that you can target with the :state() pseudo-class for conditional styling:

[ui5-toolbar-item]:state(overflowed) {
  flex-direction: column;
}

Common CSS

For applying common styling blocks based on SAP Fiori Design Guidelines, we recommend using the @sap-ui/common-css package. You can find out more about this here.