Normal Styling

Silk components’ underlying elements can be styled using any method you wish.

You can pass a className, style or any other attribute to all sub-components with underlying elements to assign CSS styles to them.

Default styles

Some components’ underlying elements come with very basic default styles. They are likely to match your needs and provide a useful base at the beginning of the development. They can be fully overridden.

• Defaults styles are identifiable by their declaration: they make use of the --silk-defaults custom property (e.g. background-color: var(--silk-defaults, #fafafa);).
• Defaults styles can be individually overridden with a selector of specificity ≥ 10 (e.g. a class or attribute selector).
• To remove all defaults styles for one element, use --silk-defaults: silk-reset; on this element.

Required styles

Most components’ underlying elements have required styles, already set for you. Those are necessary for the proper functioning of the components. They must not be overridden in any case.

• Required styles are identifiable by their declaration: they use the !important marker.
• Sometimes, a --NOTE is also present to provide further informations on specific CSS properties.

Custom properties

--silk-100-lvh-dvh-pct

Description

In iOS SFSafariViewController (i.e. iOS standard in-app browser) the CSS vh and lvh units wrongly reflect the same size as the svh unit. See https://bugs.webkit.org/show_bug.cgi?id=255708.

As a consequence, when using either of these units, we end up with a size which is shorter than expected. In particular, it is often desirable to set the height CSS property of <Scroll.View /> underlying HTML element to 100lvh or calc(100lvh + 60px) so that <Scroll.Content /> underlying HTML element overflows the layout viewport, and does not resize when the user expands or collapses manually iOS Safari's UI. It is also useful so it appears below iOS Safari's semi-transparent UI.