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!
npm install ember-styled-components
// 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;
`;
This is what you'll see in your browser:
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.
Licensed under the MIT License, Copyright © 2017 Luis Torres.
See LICENSE for more information.
- Tests
- Demo website
This project builds on a long line of earlier work by clever folks all around the world.
This document is based on the Styled Components README.md
layout: https://github.com/styled-components/styled-components/