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:

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

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!