Hướng dẫn Styled Components cơ bản

Thứ Tư, 14/06/2023

Tram Ho

styled-components xây dựng với mục tiêu giữ cho các styles của component nằm chính trong component đó

1. Cài đặt

<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

Cách sử dụng

<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. Tạo component với các thẻ html cơ bản

<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 ra HTML với class được sinh ra ngẫu nhiên không bị trùng nhau

<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

Ta có thể truyền props vào các styled components như sau

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

Kế thừa style từ component khác

<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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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 với các thư viện khác

Kế thừa cả những component của bên thứ 3

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 plain-text">
      </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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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 (

<br />

</BrowserRouter>

)

}

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

5-2. Material MUI

Cài đặt thư viện MUI

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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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 (

<>

H3 - MUI

</Typography>

H3 - styled components

</StyledTypography>

</>

)

}

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

5-3. Ant design

Cài đặt thư viện Antd

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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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 (

<>

H2 - styled components

</StyledTitle>

</>

)

}

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

6. custom tagName

Với styled-components bạn cũng có thể thay đổi tag name so với định nghĩa ban đầu.

<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

Trong styled-components có thể sử dụng những CSS selector cơ bản như > , + , ~ …

và sử dụng Nesting như 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 plain-text">
      </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 plain-text">
      </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 plain-text">
      </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 plain-text">
      </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 plain-text">
      </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 plain-text">
      </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 plain-text">
        </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 plain-text">
      </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">
    </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>

<StyledDiv>Splendid.</StyledDiv>

</div>

</>

)

}

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

8. Responsive

Hoạt động tốt với 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

Kiểu 1: tạo ra button có type là 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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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

Kiểu 2: tạo ra common button, sau đó tạo submit button kế thừa từ button này

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

kiểu 3: attrs nhận vào 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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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

Tạo ra global style áp dụng cho toàn dự án

<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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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 (

<>

</>

)

}

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

12. Styled Theme

Tạo ra theme config để dùng chung

<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 plain-text">
      </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 plain-text">
      </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 plain-text">
    </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 (

<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

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Hướng dẫn Styled Components cơ bản

1. Cài đặt

2. Tạo component với các thẻ html cơ bản

3. Props

4. Extending Styles

5. Styles với các thư viện khác

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 trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript