Using Basic Styled-components in ReactJS

Sunday, 19/09/2021

Tram Ho

What are styled-components?

Styled-component is a great CSS-in-JS library for ReactJS. It helps you to customize and manage your CSS code easily.

Install Styled-components as follows:

# <span class="token keyword">with</span> npm
npm install styled<span class="token operator">-</span>components

# <span class="token keyword">with</span> yarn
yarn add styled<span class="token operator">-</span>components

# with npm

npm install styled-components

# with yarn

yarn add styled-components

Basic styled-components

Creating a component using styled-components

<span class="token comment">// Tạo một component Title và nó sẽ render ra thẻ h1 với các styles</span>
<span class="token keyword">const</span> Title <span class="token operator">=</span> styled<span class="token punctuation">.</span>h1<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  font-size: 16px;
  text-align: center;
  color: black;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// Tạo một component Wrapper và nó sẽ render ra thẻ section với các styles</span>
<span class="token keyword">const</span> Wrapper <span class="token operator">=</span> styled<span class="token punctuation">.</span>section<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  padding: 60px;
  background: blue;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// Sử dụng Title và Wrapper như là một React component</span>
<span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>Wrapper<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Title<span class="token operator">&gt;</span>
      Hello World<span class="token operator">!</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>Title<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>Wrapper<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

// Tạo một component Title và nó sẽ render ra thẻ h1 với các styles

const Title = styled.h1`

font-size: 16px;

text-align: center;

color: black;

`;

// Tạo một component Wrapper và nó sẽ render ra thẻ section với các styles

const Wrapper = styled.section`

padding: 60px;

background: blue;

`;

// Sử dụng Title và Wrapper như là một React component

render(

<Title>

Hello World!

</Title>

</Wrapper>

);

Props

You can also pass props through a component like React to customize the CSS.

<span class="token comment">// Tạo một Button với các styles như sau:</span>
<span class="token keyword">const</span> Button <span class="token operator">=</span> styled<span class="token punctuation">.</span>button<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">

/* ở đây nhận vào một props primary dùng toán tử 3 ngôi để kiểm tra và set giá trị cho background */

  background: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token operator">=&gt;</span> props<span class="token punctuation">.</span>primary <span class="token operator">?</span> <span class="token string">"palevioletred"</span> <span class="token operator">:</span> <span class="token string">"white"</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
  color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token operator">=&gt;</span> props<span class="token punctuation">.</span>primary <span class="token operator">?</span> <span class="token string">"white"</span> <span class="token operator">:</span> <span class="token string">"palevioletred"</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
  padding: 0.25em 1em;
  border: none;
  border-radius: 3px;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Button<span class="token operator">&gt;</span>Normal<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Button primary<span class="token operator">&gt;</span>Primary<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

// Tạo một Button với các styles như sau:

const Button = styled.button`

/* ở đây nhận vào một props primary dùng toán tử 3 ngôi để kiểm tra và set giá trị cho background */

background: ${props => props.primary ? "palevioletred" : "white"};

color: ${props => props.primary ? "white" : "palevioletred"};

padding: 0.25em 1em;

border: none;

border-radius: 3px;

`;

render(

<div>

<Button>Normal</Button>

<Button primary>Primary</Button>

</div>

);

Another example for passing props.

<span class="token comment">// Tạo một input component</span>
<span class="token keyword">const</span> Input <span class="token operator">=</span> styled<span class="token punctuation">.</span>input<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token operator">=&gt;</span> props<span class="token punctuation">.</span>inputColor <span class="token operator">||</span> <span class="token string">"palevioletred"</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
  background: papayawhip;
  border: none;
  border-radius: 3px;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Input defaultValue<span class="token operator">=</span><span class="token string">"Không màu"</span> type<span class="token operator">=</span><span class="token string">"text"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Input defaultValue<span class="token operator">=</span><span class="token string">"Có màu"</span> type<span class="token operator">=</span><span class="token string">"text"</span> inputColor<span class="token operator">=</span><span class="token string">"rebeccapurple"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

// Tạo một input component

const Input = styled.input`

color: ${props => props.inputColor || "palevioletred"};

background: papayawhip;

border: none;

border-radius: 3px;

`;

render(

<div>

</div>

);

Extending Styles

Is an easy way to create a new component that inherits the styles of the old component.

<span class="token comment">// Tạo một component Button có màu blue</span>
<span class="token keyword">const</span> Button <span class="token operator">=</span> styled<span class="token punctuation">.</span>button<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  color: blue;
  font-size: 1em;
  border: none;
  border-radius: 3px;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// Tạo một RedButton kế thừa những style từ Button component phía trên và ghi đè, thêm mới một số styles</span>
<span class="token keyword">const</span> RedButton <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span>Button<span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  color: red;
  border-color: red;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Button<span class="token operator">&gt;</span>Normal Button<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>RedButton<span class="token operator">&gt;</span>Red Button<span class="token operator">&lt;</span><span class="token operator">/</span>RedButton<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

// Tạo một component Button có màu blue

color: blue;

font-size: 1em;

border: none;

border-radius: 3px;

`;

// Tạo một RedButton kế thừa những style từ Button component phía trên và ghi đè, thêm mới một số styles

const RedButton = styled(Button)`

color: red;

border-color: red;

`;

render(

<div>

<Button>Normal Button</Button>

<RedButton>Red Button</RedButton>

</div>

);

Styling any component

This feature makes it possible for us to CSS for any component such as Link in React-router-dom.

<span class="token comment">// Thực hiện việc import Link từ React-router-dom</span>
<span class="token comment">// Tạo một component mới kế thừa từ Link component</span>
<span class="token keyword">const</span> StyledLink <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span>Link<span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  color: palevioletred;
  font-weight: bold;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Link<span class="token operator">&gt;</span>Link chưa được <span class="token constant">CSS</span><span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span>StyledLink<span class="token operator">&gt;</span>Sau khi <span class="token constant">CSS</span><span class="token operator">&lt;</span><span class="token operator">/</span>StyledLink<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

// Thực hiện việc import Link từ React-router-dom

// Tạo một component mới kế thừa từ Link component

const StyledLink = styled(Link)`

color: palevioletred;

font-weight: bold;

`;

render(

<div>

</div>

);

CSS Selector

In Styled-components you can use basic CSS selectors like > , + , ~ …

And use Nesting like SASS

<span class="token keyword">const</span> Thing <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  color: blue;
  /* &amp; ở đây đại diện cho thẻ div được hiểu như sau div:hover */
  &amp;:hover {
    color: red; // &lt;Thing&gt; khi hover vào thẻ div
  }

  &amp; ~ &amp; {
    background: tomato; // &lt;Thing&gt; nằm phía sau không trực tiếp của &lt;Thing&gt;
  }

  &amp; + &amp; {
    background: lime; // &lt;Thing&gt; nằm phía sau trực tiếp của &lt;Thing&gt;
  }

  &amp;.something {
    background: orange; // &lt;Thing&gt; có class .something
  }

  &amp; .something {
    border: 1px solid; // element có class .something nằm bên trong &lt;Thing&gt;
    display: block;
  }

  .something-else &amp; {
    border: 1px solid; // &lt;Thing&gt; nằm bên trong của element có class .something-else
  }
</span><span class="token template-punctuation string">`</span></span>

<span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>React<span class="token punctuation">.</span>Fragment<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Thing<span class="token operator">&gt;</span>Hello world<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>Thing<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Thing<span class="token operator">&gt;</span>How ya doing<span class="token operator">?</span><span class="token operator">&lt;</span><span class="token operator">/</span>Thing<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Thing className<span class="token operator">=</span><span class="token string">"something"</span><span class="token operator">&gt;</span>The sun is shining<span class="token operator">...</span><span class="token operator">&lt;</span><span class="token operator">/</span>Thing<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>Pretty nice day today<span class="token punctuation">.</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Thing<span class="token operator">&gt;</span>Don't you think<span class="token operator">?</span><span class="token operator">&lt;</span><span class="token operator">/</span>Thing<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"something-else"</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>Thing<span class="token operator">&gt;</span>Splendid<span class="token punctuation">.</span><span class="token operator">&lt;</span><span class="token operator">/</span>Thing<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>React<span class="token punctuation">.</span>Fragment<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>

const Thing = styled.div`

color: blue;

/* & ở đây đại diện cho thẻ div được hiểu như sau div:hover */

&:hover {

color: red; // <Thing> khi hover vào thẻ div

}

& ~ & {

background: tomato; // <Thing> nằm phía sau không trực tiếp của <Thing>

}

& + & {

background: lime; // <Thing> nằm phía sau trực tiếp của <Thing>

}

&.something {

background: orange; // <Thing> có class .something

}

& .something {

border: 1px solid; // element có class .something nằm bên trong <Thing>

display: block;

}

.something-else & {

border: 1px solid; // <Thing> nằm bên trong của element có class .something-else

}

`

render(

<React.Fragment>

<Thing>Hello world!</Thing>

<Thing>How ya doing?</Thing>

<Thing className="something">The sun is shining...</Thing>

<div>Pretty nice day today.</div>

<Thing>Don't you think?</Thing>

<Thing>Splendid.</Thing>

</div>

</React.Fragment>

)

Animations

<span class="token keyword">import</span> <span class="token punctuation">{</span> keyframes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'styled-component'</span><span class="token punctuation">;</span>
<span class="token comment">// Tạo keyframes</span>
<span class="token keyword">const</span> rotate <span class="token operator">=</span> keyframes<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token comment">// áp dụng vào animation css</span>
<span class="token keyword">const</span> Rotate <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  display: inline-block;
  animation: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>rotate<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

<span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>Rotate<span class="token operator">&gt;</span>??<span class="token operator">&lt;</span><span class="token operator">/</span>Rotate<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

import { keyframes } from 'styled-component';

// Tạo keyframes

const rotate = keyframes`

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

`;

// áp dụng vào animation css

const Rotate = styled.div`

display: inline-block;

animation: ${rotate} 2s linear infinite;

padding: 2rem 1rem;

font-size: 1.2rem;

`;

render(

);

How to use Styled-component in React?

<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> styled <span class="token keyword">from</span> <span class="token string">'styled-components'</span>

<span class="token keyword">const</span> StyledCounter <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  /* ... */
</span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">const</span> Paragraph <span class="token operator">=</span> styled<span class="token punctuation">.</span>p<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  /* ... */
</span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">const</span> Button <span class="token operator">=</span> styled<span class="token punctuation">.</span>button<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  /* ... */
</span><span class="token template-punctuation string">`</span></span>

<span class="token comment">// Một component đơn giản là Counter</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">const</span> <span class="token function-variable function">Counter</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span>StyledCounter<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Paragraph<span class="token operator">&gt;</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>Paragraph<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token operator">+</span><span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token operator">-</span><span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>StyledCounter<span class="token operator">&gt;</span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import React from 'react'

import styled from 'styled-components'

const StyledCounter = styled.div`

/* ... */

`

const Paragraph = styled.p`

/* ... */

`

/* ... */

`

// Một component đơn giản là Counter

export default const Counter = () => {

const [count, setCount] = useState(0);

render() {

return (

<Paragraph>{count}</Paragraph>

<Button onClick={() => setCount(count + 1)}>+</Button>

<Button onClick={() => setCount(count - 1)}>-</Button>

</StyledCounter>

)

}

Conclude

Above are the basic features of Styled-components. Although basic, it is enough for you to apply it to ReactJS.

Stay tuned for part 2 with features like theme, global, css. Thank you for reading the article.

Share the news now

Using Basic Styled-components in ReactJS

What are styled-components?

Basic styled-components

Creating a component using styled-components

Props

Extending Styles

Styling any component

CSS Selector

Animations

How to use Styled-component in React?

Conclude

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers