Linaria

Use Linaria for zero-runtime CSS-in-JS in Format Studio documents.

Supported frameworks

Framework	Supported
React
Vue
HTML

Installation

Install the Linaria packages.

npm install @linaria/react @linaria/core --save-dev

pnpm add @linaria/react @linaria/core --save-dev

yarn add @linaria/react @linaria/core --dev

bun add @linaria/react @linaria/core --dev

Use styled from @linaria/react for component-scoped styles, and css from @linaria/core for global styles, including :host.

Useful

@linaria/babel-preset is not required.

Usage

documents

invoice

index.tsx

documents/invoice/index.tsx

import { Document, Layout } from '@format.dev/react'
import { styled } from '@linaria/react'

const Peach = styled.div`
	background: peachpuff;
`

export default function Invoice () {
	return (
		<Document title="Invoice">
			<Layout id="invoice" width={793.71} height={1122.52}>
				<Peach>Hey, 🍑</Peach>
			</Layout>
		</Document>
	)
}

Global styles

styled only generates scoped component classes. To style :host (the page itself) or other bare selectors, use css with a :global() block from @linaria/core.

documents/invoice/index.tsx

import { css } from '@linaria/core'

css`
	:global() {
		:host {
			background-color: #fefaf6;
		}
	}
`

Was this page helpful?