Skip to content

Latest commit

 

History

History
181 lines (139 loc) · 7.11 KB

Styling.mdx

File metadata and controls

181 lines (139 loc) · 7.11 KB

import { Footer, TableOfContent } from '@sb/components'; import { Meta } from '@storybook/addon-docs'; 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

You can change the appearance of the Web Components by using CSS Variables. Per default, we are injecting the Horizon theme parameters as CSS Variables into the <head>. For example, if you want to change the color of all texts that use the --sapTextColor variable, you can create an additional style tag with the following content:

<style>
  * {
    --sapTextColor: limegreen;
  }
</style>

As a consequence, all HTML Elements in the subtree where this style was applied are now displaying their texts in limegreen instead of #32363a which would be the default value for Fiori 3. You can change CSS Variables on any level - in the head, or on every single element by using either CSS classes or element style.

A full list of all supported CSS Variables can be found here or in the theming-base-content repo.

Scrollbars

Rendering our ThemeProvider will apply the Fiori styles to all scrollbars on the page. If you want to opt-out of this behavior, you can add the .ui5-content-native-scrollbars class to the respective element to prevent the scrollbar styling from being applied.

<ObjectPage className="ui5-content-native-scrollbars">{children}</ObjectPage>

Style your own components

It's quite likely you have to create some custom components when you are building an app. In order to reuse our central styling approach, you can import the ThemingParameters that contain the various CSS variables used in our theming, or use the CSS variables directly.

<MessageStrip design={MessageStripDesign.Information} hideCloseButton children={ <> You can find all ThemingParameters{' '} here. If you don't want to use CSS-in-JS library, you can also just use the corresponding CSS variable. </> } />

You can then create a custom component by following this recipe:

import { ThemingParameters } from '@ui5/webcomponents-react-base';
import './MyCustomElement.css';

export const MyCustomElement = () => {
  return (
    <div className="containerCustomElement">
      <span style={{ color: ThemingParameters.sapNegativeColor, fontSize: ThemingParameters.sapFontLargeSize }}>
        My Text
      </span>
    </div>
  );
};
.containerCustomElement {
  background-color: var(--sapBackgroundColor);
  font-family: var(--sapFontFamily);
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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



{' '}

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">Richard Wilson</ListItemStandard>
        <ListItemStandard description="Visual Designer">Elena Petrova</ListItemStandard>
        <ListItemStandard description="Quality Specialist">John Miller</ListItemStandard>
      </List>
    </Card>
  );
}

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.