Ember-styled-components NPM

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS allows you to write actual CSS code to style your components. It also removes the mapping between components and styles - using components as a low-level styling construct could not be easier!

This is, not fully-featured, fork from styled-components made by Glen Maddern and Max Stoiber. Thank you for making this possible!

Installation

npm install ember-styled-components

Example

// wrapper-component.js
import styled from 'ember-styled-components';

/**
 * Create a wrapper component that renders a <section> with
 * some padding and a papayawhip background
 */
export default styled.section`
  padding: 4em;
  background: papayawhip;
`;

// title-component.js
import styled from 'ember-styled-components';

/**
 * Create a title component that renders an <h1> which is
 * centered, palevioletred and sized at 1.5em
 */
export default styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

{{!-- Use them like any other Ember component – except they're styled! --}}
{{#wrapper-component}}
  {{#title-component}}Hello World, this is my first styled component!{{/title-component}}
{{/wrapper-component}}

This is what you'll see in your browser:

Contributing

If you want to contribute to ember-styled-components please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process.

Please also note that the repository follows out Code of Conduct, make sure to review and follow it.