Styling custom and third party components

Built-in HTML elements like <div> and 3rd party components within your custom component can be styled using most React styling strategies.
For how to style built-in Views components, see our styling documentation.

Styling your component
Suppose you want to build a simple custom component.
tsx
Copied
1
import { Stack } from "@airplane/views";
2


3
const PlainParty = () => {
4
  return (
5
    <Stack>
6
      <section>
7
        <Stack align="center">
8
          <h1>Airplane views party</h1>
9
        </Stack>
10
      </section>
11
    </Stack>
12
  );
13
};
14


15
export default PlainParty;
You want to add some color into our component to look like the following mock.
You can accomplish this a number of ways:

CSS
You can import a css file and apply class-based styles.
tsx
Copied
1
import { Stack } from "@airplane/views";
2


3
import airplane from "airplane";
4
import "./index.css";
5


6
const CustomCSS = () => {
7
  return (
8
    <Stack>
9
      <section className="custom-wrapper">
10
        <Stack align="center">
11
          <h1 className="custom-title">Pretty Airplane views party</h1>
12
        </Stack>
13
      </section>
14
    </Stack>
15
  );
16
};
17


18
export default airplane.view(
19
  {
20
    slug: "my_view",
21
    name: "My View",
22
  },
23
  CustomCSS
24
);

CSS Modules
CSS Modules is similar to raw CSS, but prevents class conflicts by ensuring that CSS classes are locally scoped. Use CSS modules by naming your CSS files with the .module.css extension.
tsx
Copied
1
import { Stack } from "@airplane/views";
2


3
import airplane from "airplane";
4
import styles from "./index.module.css";
5


6
const CustomCSS = () => {
7
  return (
8
    <Stack>
9
      <section className={styles["custom-wrapper"]}>
10
        <Stack align="center">
11
          <h1 className={styles["custom-title"]}>Pretty Airplane views party</h1>
12
        </Stack>
13
      </section>
14
    </Stack>
15
  );
16
};
17


18
export default airplane.view(
19
  {
20
    slug: "my_view",
21
    name: "My View",
22
  },
23
  CustomCSS
24
);

CSS in JS
Airplane Views works with CSS-in-JS frameworks. Here, we give a few usage examples.

Styled components
Install styled components via the styled-components package.
bash
Copied
1
npm install styled-components
Once installed, it can be imported and used in the view.
tsx
Copied
1
import { Stack } from "@airplane/views";
2
import styled from "styled-components";
3


4
// Create a Title component that'll render an <h1> tag with some styles
5
const CustomTitle = styled.h1`
6
  font-size: 1.5em;
7
  color: palevioletred;
8
`;
9


10
// Create a Wrapper component that'll render a <section> tag with some styles
11
const Wrapper = styled.section`
12
  padding: 4em;
13
  background: papayawhip;
14
`;
15


16
const CustomStyle = () => {
17
  return (
18
    <Stack>
19
      <Wrapper>
20
        <Stack align="center">
21
          <CustomTitle>Pretty Airplane views party</CustomTitle>
22
        </Stack>
23
      </Wrapper>
24
    </Stack>
25
  );
26
};
27


28
export default CustomStyle;

Emotion
Install Emotion via the @emotion/css package.
bash
Copied
1
npm install @emotion/css
The css function can be used to generate class names, which are applied via the className prop on built in React components.
tsx
Copied
1
import { Stack } from "@airplane/views";
2
import { css } from "@emotion/css";
3


4
const sectionStyle = css`
5
  padding: 4em;
6
  background: papayawhip;
7
`;
8


9
const headerStyle = css`
10
  font-size: 1.5em;
11
  color: palevioletred;
12
`;
13


14
const CustomStyle = () => {
15
  return (
16
    <Stack>
17
      <section className={sectionStyle}>
18
        <Stack align="center">
19
          <h1 className={headerStyle}>Pretty Airplane views party</h1>
20
        </Stack>
21
      </section>
22
    </Stack>
23
  );
24
};
25


26
export default CustomStyle;

Stitches
Install Stitches via the @stitches/react package.
bash
Copied
1
npm install @stitches/react
Stitches can be used in a similar manner as Emotion, using a css function to generate class names.
tsx
Copied
1
import { Stack } from "@airplane/views";
2
import { css } from "@stitches/react";
3


4
const sectionStyle = css({
5
  padding: "4em",
6
  background: "papayawhip",
7
});
8


9
const headerStyle = css({
10
  "font-size": "1.5em",
11
  color: "palevioletred",
12
});
13


14
const CustomStyle = () => {
15
  return (
16
    <Stack>
17
      <section className={sectionStyle()}>
18
        <Stack align="center">
19
          <h1 className={headerStyle()}>Pretty Airplane views party</h1>
20
        </Stack>
21
      </section>
22
    </Stack>
23
  );
24
};
25


26
export default CustomStyle;

Tailwind CSS
We support using Tailwind CSS using slightly modified installation instructions:
  1. We manage the PostCSS config, so there is no need to create one.
  2. You must set content.relative in your tailwind.config.js.
The full steps are listed below.
First, install tailwindcss and its peer dependencies, and initialize tailwind.config.js.
bash
Copied
1
npm install -D tailwindcss postcss autoprefixer
2
npx tailwindcss init
Next, add the paths to all your template files. Make sure that content.relative is true.
json
Copied
1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  content: {
4
    relative: true,
5
    files: ["./*.{js,ts,jsx,tsx}"],
6
  },
7
  theme: {
8
    extend: {},
9
  },
10
  plugins: [],
11
}
Add a css file containing the tailwind directives.
css
Copied
1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
That's it! Now, you can use tailwind classes in your view.
tsx
Copied
1
import { Stack } from "@airplane/views";
2


3
import airplane from "airplane";
4
import "./styles.css";
5


6
const CustomCSS = () => {
7
  return (
8
    <Stack>
9
      <section className="bg-orange-100 p-16">
10
        <Stack align="center">
11
          <h1 className="text-pink-500 font-bold text-2xl mt-6 mb-6">
12
            Pretty Airplane views party
13
          </h1>
14
        </Stack>
15
      </section>
16
    </Stack>
17
  );
18
};
19


20
export default airplane.view(
21
  {
22
    slug: "my_view",
23
    name: "My view",
24
  },
25
  CustomCSS
26
);

Other styling libraries
Styling libraries should be compatible with Airplane views if they don't require specific modifications to the build process. For example, CSS-in-JS libraries can typically be installed solely by adding a dependency, so they are compatible. If you would like to use a styling library and it does not work as expected, please contact us at support@airplane.dev or by clicking "Help and support" in the app.
PrivacyTermsSupport