Styling with Linaria

Writing Styles

Styling React components with Linaria allows you to write normal css and apply it to specific React components.

import { styled } from "linaria/react";

const Button = styled("button")`
  color: turquoise;
`;

<Button>This my button component.</Button>;

You can also use the css function, which returns a class name:

import { css } from "linaria";

const buttonStyles = css`
  color: turquoise;
`;

<button className={buttonStyles}>This is my button</button>;

Linaria also has a cx function, which can be useful for combining classnames or applying them conditionally:

import { css, cx } from 'linaria';

const buttonStyles = css`
  color: turquoise;

  & .large {
    font-size: 120%;
  }
`;


function Button(props) {
  const className = cx(buttonStyles, props.large && 'large');

  return (<button className={className}>This is my button</button>)
}

For more information, see the Linaria repo.