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
Styling your component
Suppose you want to build a simple custom component.
tsxCopied1import { Stack } from "@airplane/views";23const PlainParty = () => {4return (5<Stack>6<section>7<Stack align="center">8<h1>Airplane views party</h1>9</Stack>10</section>11</Stack>12);13};1415export 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
CSS
You can import a css file and apply class-based styles.
tsxCopied1import { Stack } from "@airplane/views";23import airplane from "airplane";4import "./index.css";56const CustomCSS = () => {7return (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};1718export default airplane.view(19{20slug: "my_view",21name: "My View",22},23CustomCSS24);
cssCopied1.custom-title {2font-size: 1.5em;3color: palevioletred;4}56.custom-wrapper {7padding: 4em;8background: papayawhip;9}
CSS Modules
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.tsxCopied1import { Stack } from "@airplane/views";23import airplane from "airplane";4import styles from "./index.module.css";56const CustomCSS = () => {7return (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};1718export default airplane.view(19{20slug: "my_view",21name: "My View",22},23CustomCSS24);
cssCopied1.custom-title {2font-size: 1.5em;3color: palevioletred;4}56.custom-wrapper {7padding: 4em;8background: papayawhip;9}
CSS in JS
CSS in JS
Airplane Views works with CSS-in-JS frameworks. Here, we give a few usage examples.
Styled components
Styled components
Install styled components via the
styled-components
package.bashCopied1npm install styled-components
bashCopied1yarn add styled-components
bashCopied1pnpm add styled-components
Once installed, it can be imported and used in the view.
tsxCopied1import { Stack } from "@airplane/views";2import styled from "styled-components";34// Create a Title component that'll render an <h1> tag with some styles5const CustomTitle = styled.h1`6font-size: 1.5em;7color: palevioletred;8`;910// Create a Wrapper component that'll render a <section> tag with some styles11const Wrapper = styled.section`12padding: 4em;13background: papayawhip;14`;1516const CustomStyle = () => {17return (18<Stack>19<Wrapper>20<Stack align="center">21<CustomTitle>Pretty Airplane views party</CustomTitle>22</Stack>23</Wrapper>24</Stack>25);26};2728export default CustomStyle;
Emotion
Emotion
Install Emotion via the
@emotion/css
package.bashCopied1npm install @emotion/css
bashCopied1yarn add @emotion/css
bashCopied1pnpm add @emotion/css
The
css
function can be used to generate class names, which are applied via the className
prop
on built in React components.tsxCopied1import { Stack } from "@airplane/views";2import { css } from "@emotion/css";34const sectionStyle = css`5padding: 4em;6background: papayawhip;7`;89const headerStyle = css`10font-size: 1.5em;11color: palevioletred;12`;1314const CustomStyle = () => {15return (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};2526export default CustomStyle;
Stitches
Stitches
Install Stitches via the
@stitches/react
package.bashCopied1npm install @stitches/react
bashCopied1yarn add @stitches/react
bashCopied1pnpm add @stitches/react
Stitches can be used in a similar manner as Emotion, using a
css
function to generate class names.tsxCopied1import { Stack } from "@airplane/views";2import { css } from "@stitches/react";34const sectionStyle = css({5padding: "4em",6background: "papayawhip",7});89const headerStyle = css({10"font-size": "1.5em",11color: "palevioletred",12});1314const CustomStyle = () => {15return (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};2526export default CustomStyle;
Tailwind CSS
Tailwind CSS
We support using Tailwind CSS using slightly modified
installation instructions:
- We manage the PostCSS config, so there is no need to create one.
- You must set
content.relative
in yourtailwind.config.js
.
The full steps are listed below.
First, install
tailwindcss
and its peer dependencies, and initialize tailwind.config.js
.bashCopied1npm install -D tailwindcss postcss autoprefixer2npx tailwindcss init
bashCopied1yarn add -D tailwindcss postcss autoprefixer2yarn tailwindcss init
bashCopied1pnpm add -D tailwindcss postcss autoprefixer2pnpm tailwindcss init
Next, add the paths to all your template files. Make sure that
content.relative
is true
.jsonCopied1/** @type {import('tailwindcss').Config} */2module.exports = {3content: {4relative: true,5files: ["./*.{js,ts,jsx,tsx}"],6},7theme: {8extend: {},9},10plugins: [],11}
Add a css file containing the tailwind directives.
cssCopied1@tailwind base;2@tailwind components;3@tailwind utilities;
That's it! Now, you can use tailwind classes in your view.
tsxCopied1import { Stack } from "@airplane/views";23import airplane from "airplane";4import "./styles.css";56const CustomCSS = () => {7return (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">12Pretty Airplane views party13</h1>14</Stack>15</section>16</Stack>17);18};1920export default airplane.view(21{22slug: "my_view",23name: "My view",24},25CustomCSS26);
Other styling libraries
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.