Styling the Lynx project

In this article, we will dive into the world of styling in Lynx. Styling a Lynx app shares similarities with styling web apps, but it also introduces some key differences. 1) Lynx-Specific Properties (-x- prefixed properties) Lynx introduces properties that start with -x- to make it easier to style the design. These properties are specific to Lynx and are not part of standard CSS. Example, The -x-handle-color property is used specify the color of the floating marker when copying text. .text1::selection { -x-handle-color: blue; } Refer to the official docs for all the styling properties 2) Inline Styles and Selectors S In Lynx, inline styles are used in a way very similar to React's inline styling, where styles are passed as an object. Example: 3) Nesting Syntax: Native CSS does not support nesting but Lynx supports nesting syntax similar to Sass or PostCSS. Example: .a { background: red; &-b { border-radius: 30px; } } /* equals */ .a { background: red; } .a-b { border-radius: 30px; } Now that you know the basics, you can start exploring these APIs, which illustrate different Styling components in Lynx. Styling API references Property API references Selector API references Now that we understand how to style the Lynx project, we'll explore the Layout in the next article. Follow for more!

Mar 12, 2025 - 09:32

In this article, we will dive into the world of styling in Lynx.
Styling a Lynx app shares similarities with styling web apps, but it also introduces some key differences.

1) Lynx-Specific Properties (`-x-` prefixed properties)

Lynx introduces properties that start with -x- to make it easier to style the design. These properties are specific to Lynx and are not part of standard CSS.

Example, The -x-handle-color property is used specify the color of the floating marker when copying text.

.text1::selection {
  -x-handle-color: blue;
}

Refer to the official docs for all the styling properties

2) Inline Styles and Selectors S

In Lynx, inline styles are used in a way very similar to React's inline styling, where styles are passed as an object.
Example:


      style={{
        flexDirection: "column",
        marginTop: "50%",
        transform: "translate(-50%, -50%)",
        marginLeft: "50%",
        width: "150px",
        height: "150px",
      }}
    >

3) Nesting Syntax:

Native CSS does not support nesting but Lynx supports nesting syntax similar to Sass or PostCSS.
Example:

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

/* equals */

.a {
  background: red;
}

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

Now that you know the basics, you can start exploring these APIs, which illustrate different Styling components in Lynx.

Now that we understand how to style the Lynx project, we'll explore the Layout in the next article.

Follow for more!