Posted on Jul 29, 2020

Using Styled-component with Ember.js

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" />