Using Styled-component with Ember.js
Tags: ember, css, javascript
Published: 2020-07-29 16:04:39

### **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

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

<button class=”my-button”> click me </button>
```
We can have

```jsx
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

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

```javascript
// 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
```jsx
{{!-- 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1hud9t5x7nd1yxvg5j5t.gif)

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

```javascript
// 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.

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


You can find the repo here 
https://github.com/shayanypn/ember-styled-component-login


Resources:
https://www.robinwieruch.de/react-styled-components