css helper

Helper: css

The css helper is a simple wrapper around the css function provided by emotion. All of the positional params to the helper, as well as the named arguments as a single object, will be passed straight through to the css function. This allows you to create emotion classes on the fly, in the template, by composing other classes together or setting specific CSS property values

// components/foo-bar/styles.js
import { css } from 'emotion';

export const border = css`
  border: 1px solid black;
`;

export const background = css`
  background: blue;
`;

{{! components/foo-bar/template.hbs }}
<p class={{css (emotion-class 'border') (emotion-class 'background') color='red'}}>
  This has a border, blue background and red text
</p>