Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

Styling with CSS

Cascading Style Sheets (CSS) are used to style and layout Lynx pages. For example, you can change the font, color, size, and position of the content, split the content into multiple columns, or add animations and other decorative elements to make your pages more vivid and interesting. In addition, Lynx provides numerous properties starting with -x- to help you achieve style design more easily. The following tutorial will demonstrate how to add styles to elements using CSS.

TIP

If you have no basic knowledges about CSS, you can go through the guidance from web docs.

Selectors and inline styles

You can use selectors and inline styles to set values to element's properties.

Such as using class attribute with a class selector:

The following example set the background property of the element whose class has 'bg-gradient'.

csssrc/class_guide/index.tsx
Preview

And you can also set the element's properties via style attribute directly. In the example before, we use style to change the element's position and size.

Nesting

With nesting syntax, you can declare classes in an easier way. You can get this in Sass, which is already supported in ReactLynx, or other post css plugins, such as postcss-nesting.

.a {
  background: red;
  &-b {
    border-radius: 30px;
  }
}

/* equals */

.a {
  background: red;
}

.a-b {
  border-radius: 30px;
}

CSS cascading

The Cascade specification defines which value takes effect when multiple selectors applied to the same element, and they got duplicate properties with different values.

For example, properties set by style attribute covers those set by style rules (e.g class selector), class with higher specificity covers those lower ones.

csssrc/cascade_guide/index.css
Preview

In the case above，both two selectors, bg-gradient and bg-color are taking effect on the <view>，and they are both changing the background property. Following the specification of the cascade, the class appears later in the document covers the earlier one, thus the rectangle should be red.

CSS Variables and Opt-in Inheritance

Lynx supports CSS custom properties (CSS variables) and opt-in CSS inheritance for dynamic styling and theming.

CSS custom properties are inherited by default, while regular (non-custom) CSS properties require explicit configuration. See the Theming guide for details:

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.