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"
/>
You can find the repo here
https://github.com/shayanypn/ember-styled-component-login
Resources:
https://www.robinwieruch.de/react-styled-components
Top comments (0)