Basic Styled Components Tutorial

Wednesday, 14/06/2023

Tram Ho

styled-components is built with the goal of keeping the component’s styles in that component

1. Settings

<span class="token function">npm</span> <span class="token function">install</span> styled-components

1 2	<span class="token function">npm</span> <span class="token function">install</span> styled-components

Using

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

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

2. Create components with basic html tags

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

<span class="token comment">// Tạo component Title render ra thẻ h1</span>
<span class="token keyword">const</span> StyledTitle <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">
  color: red;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledTitle</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Hello world</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledTitle</span></span> <span class="token punctuation">&gt;</span></span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

// Tạo component Title render ra thẻ h1

const StyledTitle = styled . h1 `

color: red;

`

export default function App ( ) {

return < StyledTitle > Hello world </ StyledTitle >

}

Output to HTML with a randomly generated class that does not overlap

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> h1</span> <span class="token attr-name">class</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> sc-gsnTZi fZzjcr <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> Hello world <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> h1</span> <span class="token punctuation">&gt;</span></span>

< h1 class = " sc-gsnTZi fZzjcr " > Hello world </ h1 >

Demo: https://codesandbox.io/s/styled-component-html-220lyc?file=/src/App.js

3. Props

We can pass props to styled components as follows:

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

<span class="token comment">// Tạo component Button với các styles như sau</span>
<span class="token keyword">const</span> StyledButton <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">
  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">'red'</span> <span class="token operator">:</span> <span class="token string">'white'</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Normal Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledButton</span></span> <span class="token attr-name">primary</span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Primary Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

// Tạo component Button với các styles như sau

background: ${ props => props . primary ? 'red' : 'white' } ;

`

return (

< >

< StyledButton > Normal Button </ StyledButton >

< StyledButton primary > Primary Button </ StyledButton >

</ >

)

}

Demo: https://codesandbox.io/s/styled-components-props-zh1092?file=/src/App.js

4. Extending Styles

Inherit style from another component

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

<span class="token comment">// Tạo một component Button</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;
</span><span class="token template-punctuation string">`</span></span>

<span class="token comment">// Tạo một RedButton kế thừa những style </span>
<span class="token comment">// từ Button phía trên, ghi đè hoặc thêm mới 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 keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Button</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Normal Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Button</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">RedButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Red Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">RedButton</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

// Tạo một component Button

const Button = styled . button `

color: blue;

font-size: 1em;

`

// Tạo một RedButton kế thừa những style

// từ Button phía trên, ghi đè hoặc thêm mới styles

const RedButton = styled ( Button ) `

color: red;

border-color: red;

`

return (

< >

< Button > Normal Button </ Button >

< RedButton > Red Button </ RedButton >

</ >

)

}

Demo: https://codesandbox.io/s/styled-components-extend-style-q6tq0c?file=/src/App.js

5. Styles with other libraries

Inherit 3rd party components

5-1. React router dom

<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter <span class="token punctuation">,</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token keyword">import</span> styled <span class="token keyword">from</span> <span class="token string">'styled-components'</span>

<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: red;
  font-weight: bold;
</span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">BrowserRouter</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Link</span></span> <span class="token attr-name">to</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /about <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Link chưa được CSS</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Link</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> br</span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledLink</span></span> <span class="token attr-name">to</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> /about <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Sau khi CSS</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledLink</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">BrowserRouter</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import { BrowserRouter , Link } from 'react-router-dom'

import styled from 'styled-components'

// 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: red;

font-weight: bold;

`

return (

< BrowserRouter >

< Link to = " /about " > Link chưa được CSS </ Link >

< br />

< StyledLink to = " /about " > Sau khi CSS </ StyledLink >

</ BrowserRouter >

)

}

Demo: https://codesandbox.io/s/styled-component-react-router-dom-28oebw?file=/src/App.js

5-2. Material MUI

Install MUI library

npm install @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc

1 2	npm install @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc

<span class="token keyword">import</span> Typography <span class="token keyword">from</span> <span class="token string">'@mui/material/Typography'</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> StyledTypography <span class="token operator">=</span> <span class="token function">styled</span> <span class="token punctuation">(</span> Typography <span class="token punctuation">)</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  color: #333333;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Typography</span></span> <span class="token attr-name">variant</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> h3 <span class="token punctuation">"</span></span> <span class="token attr-name">gutterBottom</span> <span class="token punctuation">&gt;</span></span><span class="token plain-text">
        H3 - MUI
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Typography</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledTypography</span></span> <span class="token attr-name">variant</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> h3 <span class="token punctuation">"</span></span> <span class="token attr-name">gutterBottom</span> <span class="token punctuation">&gt;</span></span><span class="token plain-text">
        H3 - styled components
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledTypography</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import Typography from '@mui/material/Typography'

import styled from 'styled-components'

const StyledTypography = styled ( Typography ) `

color: #333333;

`

return (

< >

< Typography variant = " h3 " gutterBottom >

H3 - MUI

</ Typography >

< StyledTypography variant = " h3 " gutterBottom >

H3 - styled components

</ StyledTypography >

</ >

)

}

Demo: https://codesandbox.io/s/styled-component-material-ui-r3gplj?file=/src/App.js

5-3. Ant design

Install the Antd . library

npm install antd

1 2	npm install antd

<span class="token keyword">import</span> <span class="token string">'antd/dist/antd.css'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Typography <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</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> <span class="token punctuation">{</span> Title <span class="token punctuation">}</span> <span class="token operator">=</span> Typography

<span class="token keyword">const</span> StyledTitle <span class="token operator">=</span> <span class="token function">styled</span> <span class="token punctuation">(</span> Title <span class="token punctuation">)</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  &amp;.ant-typography { color: red; }
 
  /* Cách khác */
  /* &amp;&amp;&amp; { color: red; } */
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Title</span></span> <span class="token attr-name">level</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token number">2</span> <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">H2 - Antd</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Title</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledTitle</span></span> <span class="token attr-name">level</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> <span class="token number">2</span> <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span><span class="token plain-text">
        H2 - styled components
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledTitle</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import 'antd/dist/antd.css'

import { Typography } from 'antd'

import styled from 'styled-components'

const { Title } = Typography

const StyledTitle = styled ( Title ) `

&.ant-typography { color: red; }

/* Cách khác */

/* &&& { color: red; } */

`

return (

< >

< Title level = { 2 } > H2 - Antd </ Title >

< StyledTitle level = { 2 } >

H2 - styled components

</ StyledTitle >

</ >

)

}

Demo: https://codesandbox.io/s/styled-component-antd-j8j2q1?file=/src/App.js

6. custom tagName

With styled-components you can also change the tag name from the original definition.

<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> StyledDiv <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: red;
  font-size: 2rem;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 comment">// Thay đổi tag div =&gt; section</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledDiv</span></span> <span class="token attr-name">as</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> section <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Hello World!</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

const StyledDiv = styled . div `

color: red;

font-size: 2rem;

`

return (

// Thay đổi tag div => section

< StyledDiv as = " section " > Hello World! </ StyledDiv >

) ;

}

Demo: https://codesandbox.io/s/styled-component-change-html-1fg2cl?file=/src/App.js

7. CSS Selector

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

and use Nesting like SASS

<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> StyledDiv <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;
  /* div khi được hover */
  &amp;:hover { color: red; }

  /* div nằm phía sau không trực tiếp của div */
  &amp; ~ &amp; { background: tomato; }
  
  /* div nằm phía sau trực tiếp của div */
  &amp; + &amp; { background: lime; }

  /* div có class là something */
  &amp;.something { background: orange; }

  /* div có class .something nằm bên trong */
  &amp; .something { background: red; }

  /* div nằm bên trong html nào đó có class .something-else */
  .something-else &amp; { background: cyan; }
</span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Hello world!</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">How ya doing?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledDiv</span></span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> something <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">The sun is shining...</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Pretty nice day today.</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Don't you think?</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token attr-name">className</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span> something-else <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Splendid.</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledDiv</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

color: blue;

/* div khi được hover */

&:hover { color: red; }

/* div nằm phía sau không trực tiếp của div */

& ~ & { background: tomato; }

/* div nằm phía sau trực tiếp của div */

& + & { background: lime; }

/* div có class là something */

&.something { background: orange; }

/* div có class .something nằm bên trong */

& .something { background: red; }

/* div nằm bên trong html nào đó có class .something-else */

.something-else & { background: cyan; }

`

return (

< >

< StyledDiv > Hello world! </ StyledDiv >

< StyledDiv > How ya doing? </ StyledDiv >

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

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

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

< div className = " something-else " >

< StyledDiv > Splendid. </ StyledDiv >

</ div >

</ >

)

}

Demo: https://codesandbox.io/s/styled-component-css-selector-x7g98s?file=/src/App.js

8. Responsive

Works well with responsive

<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> StyledTitle <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">
  background: cyan;
  color: black;
  @media screen and (min-width: 768px) {
    background: tomato;
  }
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledTitle</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Hello World!</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledTitle</span></span> <span class="token punctuation">&gt;</span></span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

background: cyan;

color: black;

@media screen and (min-width: 768px) {

background: tomato;

}

`

return < StyledTitle > Hello World! </ StyledTitle >

}

Demo: https://codesandbox.io/s/styled-component-responsive-n77075?file=/src/App.js

9. Animations

<span class="token keyword">import</span> styled <span class="token keyword">from</span> <span class="token string">'styled-components'</span>
<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-components'</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 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">
  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;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">Rotate</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Something</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">Rotate</span></span> <span class="token punctuation">&gt;</span></span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

import { keyframes } from 'styled-components'

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

animation: ${ rotate } 2s linear infinite;

`

return < Rotate > Something </ Rotate >

}

Demo: https://codesandbox.io/s/styled-component-animation-0ogv50?file=/src/App.js

10. With attribute

Style 1 : create a button with type submit

<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> StyledSubmitButton <span class="token operator">=</span> styled <span class="token punctuation">.</span> button <span class="token punctuation">.</span> <span class="token function">attrs</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  type <span class="token operator">:</span> <span class="token string">'submit'</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  border: none;
  padding: 10px;
  color: black;
  background: violet;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> h1</span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Hello World</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> h1</span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledSubmitButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Submit Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledSubmitButton</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

const StyledSubmitButton = styled . button . attrs ( {

type : 'submit'

} ) `

border: none;

padding: 10px;

color: black;

background: violet;

`

return (

< >

< h1 > Hello World </ h1 >

< StyledSubmitButton > Submit Button </ StyledSubmitButton >

</ >

)

}

Demo 1: https://codesandbox.io/s/styled-component-attribute1-lsy7yb?file=/src/App.js

Style 2 : create common button, then create submit button inherit from this button

<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> StyledButton <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">
  border: none;
  padding: 10px;
  color: black;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">const</span> StyledSubmitButton <span class="token operator">=</span> <span class="token function">styled</span> <span class="token punctuation">(</span> StyledButton <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">attrs</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  type <span class="token operator">:</span> <span class="token string">'submit'</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  background: violet;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Normal Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledSubmitButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Submit Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledSubmitButton</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

border: none;

padding: 10px;

color: black;

`

const StyledSubmitButton = styled ( StyledButton ) . attrs ( {

type : 'submit'

background: violet;

`

return (

< >

< StyledButton > Normal Button </ StyledButton >

</ >

)

}

Demo 2: https://codesandbox.io/s/styled-component-attribute2-8pettq?file=/src/App.js

type 3 : attrs receive function

<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> StyledButton <span class="token operator">=</span> styled <span class="token punctuation">.</span> button <span class="token punctuation">.</span> <span class="token function">attrs</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  type <span class="token operator">:</span> props <span class="token punctuation">.</span> type <span class="token operator">||</span> <span class="token string">'button'</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  border: none;
  padding: 10px;
  color: black;
  background: violet;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Normal Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledButton</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">'</span> submit <span class="token punctuation">'</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Submit Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledButton</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import styled from 'styled-components'

const StyledButton = styled . button . attrs ( props => ( {

type : props . type || 'button'

} ) ) `

border: none;

padding: 10px;

color: black;

background: violet;

`

return (

< >

< StyledButton > Normal Button </ StyledButton >

< StyledButton type = ' submit ' > Submit Button </ StyledButton >

</ >

)

}

Demo 3: https://codesandbox.io/s/styled-component-attribute3-hxs2nl?file=/src/App.js

11. Global style

Create a global style that applies to the entire project

<span class="token keyword">import</span> <span class="token punctuation">{</span> createGlobalStyle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span>

<span class="token keyword">const</span> GlobalStyle <span class="token operator">=</span> createGlobalStyle <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
  h1 { color: red; }
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">GlobalStyle</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> h1</span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Hello World</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> h1</span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle `

h1 { color: red; }

`

return (

< >

< GlobalStyle />

</ >

)

}

Demo: https://codesandbox.io/s/styled-component-global-style-8jyog9?file=/src/App.js

12. Styled Theme

Create theme config for sharing

<span class="token keyword">import</span> styled <span class="token punctuation">,</span> <span class="token punctuation">{</span> ThemeProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span>

<span class="token keyword">const</span> styledTheme <span class="token operator">=</span> <span class="token punctuation">{</span>
  warning <span class="token operator">:</span> <span class="token punctuation">{</span>
    background <span class="token operator">:</span> <span class="token string">'#ffc107'</span> <span class="token punctuation">,</span>
    text <span class="token operator">:</span> <span class="token string">'#000'</span>
  <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  danger <span class="token operator">:</span> <span class="token punctuation">{</span>
    background <span class="token operator">:</span> <span class="token string">'#dc3545'</span> <span class="token punctuation">,</span>
    text <span class="token operator">:</span> <span class="token string">'#fff'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> StyledWarningButton <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: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> props <span class="token punctuation">.</span> theme <span class="token punctuation">.</span> warning <span class="token punctuation">.</span> text <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">;
  background: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> props <span class="token punctuation">.</span> theme <span class="token punctuation">.</span> warning <span class="token punctuation">.</span> background <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">const</span> StyledDangerButton <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: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> props <span class="token punctuation">.</span> theme <span class="token punctuation">.</span> danger <span class="token punctuation">.</span> text <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">;
  background: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> props <span class="token punctuation">.</span> theme <span class="token punctuation">.</span> danger <span class="token punctuation">.</span> background <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">;
</span><span class="token template-punctuation string">`</span></span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">App</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 tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> styledTheme <span class="token punctuation">}</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledWarningButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Warning Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledWarningButton</span></span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> <span class="token class-name">StyledDangerButton</span></span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">Danger Button</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">StyledDangerButton</span></span> <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> <span class="token class-name">ThemeProvider</span></span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

import styled , { ThemeProvider } from 'styled-components'

const styledTheme = {

warning : {

background : '#ffc107' ,

text : '#000'

} ,

danger : {

background : '#dc3545' ,

text : '#fff'

}

const StyledWarningButton = styled . button `

color: ${ ( props ) => props . theme . warning . text } ;

background: ${ ( props ) => props . theme . warning . background } ;

`

const StyledDangerButton = styled . button `

color: ${ ( props ) => props . theme . danger . text } ;

background: ${ ( props ) => props . theme . danger . background } ;

`

return (

< ThemeProvider theme = { styledTheme } >

< StyledWarningButton > Warning Button </ StyledWarningButton >

< StyledDangerButton > Danger Button </ StyledDangerButton >

</ ThemeProvider >

) ;

}

Demo: https://codesandbox.io/s/styled-component-config-theme-n3ey3k?file=/src/App.js:0-836

Share the news now

Source : Viblo

Basic Styled Components Tutorial

1. Settings

2. Create components with basic html tags

3. Props

4. Extending Styles

5. Styles with other libraries

5-1. React router dom

5-2. Material MUI

5-3. Ant design

6. custom tagName

7. CSS Selector

8. Responsive

9. Animations

10. With attribute

11. Global style

12. Styled Theme

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