Using Styled-component with Ember.js

#ember #css #javascript

What is Styled component:

Styled Components are one of the new ways to use CSS in modern JavaScript. It is meant to be a successor of CSS Modules; a way to write CSS that's scoped to a single component, and not leak to any other element in the page
So, instead of having

.my-button {
  Background-color: blue;
  Color: white;
}

<button class=”my-button”> click me </button>

We can have

const MyButton = styled.button`
  background-color: blue;
  color: white;
`

<MyButton> click me </MyButton>

Styled Components was created because of the following reasons:

Automatic critical CSS: Styled Components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
No class name bugs: Styled Components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings. Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. Styled Components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
Automatic vendor prefixing: write your CSS to the current standard and let Styled Components handle the rest.

Using Styled Component with Ember.js

You have this ability to use Styled-Component in Ember.js just like other libraries and frameworks, with a little bit different patterns.
As you know Ember.js has its architecture which makes it easy to understand and use. In Ember.js all components defined under the app/components/ directory, and styled-components also defined as a component under Ember.js architecture.
In order to use styled-components we need to install an addon named ember-styled-components which you can find here.
Let’s first install the addon using below command

npm install ember-styled-components

Then you can define your styled-component as a component under the Ember.js component directory, but besides using a template your component only has a js file.

So let’s create files named wrapper-component.js and title-component.js under the component directory and define your style

// 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;
`;

Now you can use this component under your template, or in other components like this

// 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;
`;

and finally, use them in your template

{{!-- For old version of Ember --}}
{{#wrapper-component}}
  {{#title-component}}Hello World, this is my first styled component!{{/title-component}}
{{/wrapper-component}}

{{!-- For New version of Ember --}}
<WrapperComponent>
  <TitleComponent>Hello World, this is my first styled component!</TitleComponent>
</WrapperComponent>

Although Ember.js architecture brings simplicity and understandability to it, here I think it causes a bit of an issue, as you have to define a component under the component directory for using a styled component, maybe it would be better if we could use the styled-component directly in the templates.

I tried to use a styled-component and build a sample designed as below.

For organizing the code, I place all styled-components under a styled directory so that I can understand where this component is and styled-components or an ember.js component.

Let see, how I handle my wrapper

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

export default styled.section`
  background: #e4e7fd;
  padding: 4em;
  min-height:  100vh;
  font-family: 'Lato', sans-serif;
`;

// template
<Styled::Wrapper>
  Your content is here
</Styled::Wrapper>

Also, you can handle passing params to your styled-component.

// app/components/styled/input-form.js
import styled from 'ember-styled-components';

export default styled.input`
    margin: 0;
    color: ${props => props.inputColor || '#000'};
    background: ${props => props.bgColor || '#fff'};
    border-radius: 4px;
    width: 100%;
    padding: 10px;
    border: 1px solid #dedede;
    box-sizing: border-box;
    font-size: 15px;
    margin-bottom: 15px;
    &::placeholder {
        color: ${props => props.placeholderTextColor || '#aaa'};
    }
`;


// template
<Styled::FormInput
    name="username"
    placeholder="Email"
    type="text"
    @inputColor="#ff9900"
    @bgColor="#222"
/>