Emotion-vdo NPM

emotion-vdo

emotion-react adapted for VDO. styled accepts styles as a template literal, object, or function that returns an object.

Installation

npm install emotion-vdo

Works well with tamia-theme.

Usage

Styling elements and components

import styled, { css, cx } from 'emotion-vdo';
import theme from 'tamia-theme';

const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin-bottom: ${theme.space.xl};
`;

const panel = css`
  flex-basis: 300px;
  flex-grow: 1;
`;
const panelPrev = css`
  padding-right: ${theme.space.m};
`;
const panelNext = css`
  padding-left: ${theme.space.m};
  text-align: right;
`;
const Panel = ({ prev, next, ...props }) => (
  <div
    className={cx(panel, {
      [panelPrev]: prev,
      [panelNext]: next,
    })}
    {...props}
  />
);

Change the rendered tag using `withComponent`

// Creates a section element
const Content = styled('section')`
  background: #333;
`

// Creates an aside element with the same styles as Content
const Sidebar = Content.withComponent('aside')

Shorthand style

Requires Emotion Babel plugin. The installation documentation can be found here.

import styled from 'emotion-vdo';

const H3 = styled.h3`
  font-size: 24px;
  color: red;
`
function Greeting ({ name }) {
  return <H3>Hello {name}</H3>
}