Styling

Customize the look and feel of views

Styling views components

Views components can be styled to tweak their look and feel.

Colors

Many components have a color prop that allows you to manually configure the component's color.
Loading view...

Shades

Each color has 10 shades to choose from with 0 being the lightest and 9 being the darkest.
You can set the shade of a color by specifying <color>.<shade> for the color.
When no shade is specified it defaults to 6.
Loading view...

Inline css

Most views components have an sx prop for setting custom inline css styling.
The sx prop supports most css fields, except they are written in camelCase rather than standard kebab-case. For example, background-color would be backgroundColor.
Loading view...
Prefer to use built in component props over the sx prop. For example, while the padding of Card can be edited using a padding entry in the sx prop, it is more easily changed via the built in p prop.

Styling third party or built in React components

While views components can only be styled using the sx prop, third party components and built in React components (like <div>) can be styled using css or another styling library.
Styling and theming views components is coming soon!

CSS

In the following example, we import a css file and apply class-based styles to built in React components.
css
Copied
1
/* index.css */
2
.custom-title {
3
font-size: 1.5em;
4
color: palevioletred;
5
}
6
7
.custom-wrapper {
8
padding: 4em;
9
background: papayawhip;
10
}
tsx
Copied
1
import { Stack } from "@airplane/views";
2
import "./index.css";
3
4
const CustomCSS = () => {
5
return (
6
<Stack>
7
<section className="custom-wrapper">
8
<Stack align="center">
9
<h1 className="custom-title">Pretty Airplane views party</h1>
10
</Stack>
11
</section>
12
</Stack>
13
);
14
};
15
16
export default CustomCSS;

Styled components

In the following example, we install Styled components—a popular CSS in JavaScript styling library.
bash
Copied
1
npm install styled-components
Once installed, it can be imported and used in the view.

Other styling libraries

Most styling libraries should be compatible with Airplane views. If you find a library that does not work as expected, please contact us at support@airplane.dev or by clicking "Help and support" in the app.