Styled Components and organization

Thứ Năm, 20/02/2020

Tram Ho

Hi guys, like today’s title I would like to introduce some tips on working with styled components .

In React projects I support, most of them use styled components to replace traditional CSS or SCSS writing. This is a common library used to styled the React App.

Why not use SCSS to styled.

With React, we write styles of components like normal CSS is to import this corresponding CSS file into that component (or the root component that contains it). If it is a SCSS file, we can use node-sass to import it directly or we can use webpack to build similar. However, with React that way is not recommended, because it does not show which CSS corresponds to which component, the style should come with the component.

Setting

With npm

npm install --save styled-components

1 2	npm install --save styled-components

Or use a CDN

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> https://unpkg.com/styled-components/dist/styled-components.min.js <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> script</span> <span class="token punctuation">&gt;</span></span>

< script src = " https://unpkg.com/styled-components/dist/styled-components.min.js " > </ script >

Create a component

<span class="token comment">&lt;!-- Cách truyền thống --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> style</span> <span class="token punctuation">&gt;</span></span> <span class="token style language-css">
  <span class="token selector">.card</span> <span class="token punctuation">{</span> 
    <span class="token property">color</span> <span class="token punctuation">:</span> #00d8ff <span class="token punctuation">;</span> 
    <span class="token property">background</span> <span class="token punctuation">:</span> #222 <span class="token punctuation">;</span> 
  <span class="token punctuation">}</span>
</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> style</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">class</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> card <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> div</span> <span class="token punctuation">&gt;</span></span>

< style >

.card {

color : #00d8ff ;

background : #222 ;

}

</ style >

< div class = " card " > </ div >

<span class="token comment">// Với styled components</span>
<span class="token keyword">import</span> styled <span class="token keyword">from</span> <span class="token string">"styled-components"</span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> component <span class="token operator">=</span> styled <span class="token punctuation">.</span> nameTag <span class="token template-string"><span class="token string">`
  //conent css
`</span></span> <span class="token punctuation">;</span>

<span class="token comment">// Ví dụ tạo một component card</span>
<span class="token keyword">const</span> Card <span class="token operator">=</span> styled <span class="token punctuation">.</span> div <span class="token template-string"><span class="token string">`
  padding: 10px;
  color: white;
  background: red;
  border: solid 1px green;
`</span></span> <span class="token punctuation">;</span>

// Với styled components

import styled from "styled-components" ;

const component = styled . nameTag `

//conent css

` ;

// Ví dụ tạo một component card

const Card = styled . div `

padding: 10px;

color: white;

background: red;

border: solid 1px green;

` ;

We can also extend the component easily

<span class="token comment">// Extends component &lt;Card /&gt;</span>
<span class="token keyword">const</span> ProductItem <span class="token operator">=</span> <span class="token function">styled</span> <span class="token punctuation">(</span> Card <span class="token punctuation">)</span> <span class="token template-string"><span class="token string">`
  transition: all .3s;

  &amp;:hover {
    opacity: .7;
  }
`</span></span> <span class="token punctuation">;</span>

// Extends component <Card />

const ProductItem = styled ( Card ) `

transition: all .3s;

&:hover {

opacity: .7;

}

` ;

Some tricks you may not know

1. Use the Context API

<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 punctuation">;</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token punctuation">{</span>
  primaryColor <span class="token punctuation">:</span> <span class="token string">'salmon'</span> <span class="token punctuation">,</span>
  fontFamily <span class="token punctuation">:</span> <span class="token string">'Bebas'</span> <span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</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 string">`
  background: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; theme.primaryColor};
  font-family: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; theme.fontFamily};
`</span></span> <span class="token punctuation">;</span>

<span class="token operator">&lt;</span> ThemeProvider theme <span class="token operator">=</span> <span class="token punctuation">{</span> theme <span class="token punctuation">}</span> <span class="token operator">&gt;</span>  
  <span class="token operator">&lt;</span> Button <span class="token operator">/</span> <span class="token operator">&gt;</span>
  
  <span class="token punctuation">{</span> <span class="token comment">/* bạn cũng có thể override */</span> <span class="token punctuation">}</span>
  <span class="token operator">&lt;</span> Button theme <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> primaryColor <span class="token punctuation">:</span> <span class="token string">'green'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
<span class="token operator">&lt;</span> <span class="token operator">/</span> ThemeProvider <span class="token operator">&gt;</span>

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

const theme = {

primaryColor : 'salmon' ,

fontFamily : 'Bebas' ,

} ;

const Button = styled . button `

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

font-family: ${ ( { theme } ) => theme.fontFamily};

` ;

< ThemeProvider theme = { theme } >

< Button / >

{ /* bạn cũng có thể override */ }

< Button theme = { { primaryColor : 'green' } } / >

< / ThemeProvider >

2. Flexible styled with props

This is an interesting feature when using styled components, you can pass props to the styled to be more flexible.

<span class="token keyword">export</span> <span class="token keyword">const</span> Component <span class="token operator">=</span> styled <span class="token punctuation">.</span> div <span class="token template-string"><span class="token string">`
  /* // mặc định set background màu đỏ nếu không truyền vào props */
  background: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> background <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; background || "red"};

  /* Lấy giá trị size từ theme */
  font-size: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; theme.fontSize.sm};

  /* Check điều kiện để lấy giá trị */
  margin-left: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> isRight <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; (isRight ? "20px" : "10px")};

  /* Hoặc có thể truyền props multiline */
  </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> isPrimary <span class="token punctuation">,</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt;
    isPrimary &amp;&amp;
    css`</span></span>
      margin <span class="token punctuation">:</span> <span class="token number">10</span> px <span class="token number">0</span> <span class="token punctuation">;</span>
      padding <span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">10</span> px <span class="token punctuation">;</span>
      color <span class="token punctuation">:</span> $ <span class="token punctuation">{</span> theme <span class="token punctuation">.</span> colors <span class="token punctuation">.</span> orange <span class="token punctuation">}</span> <span class="token punctuation">;</span>
      transition <span class="token punctuation">:</span> all <span class="token number">.3</span> s <span class="token punctuation">;</span>
  <span class="token template-string"><span class="token string">`}
`</span></span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span> Component background <span class="token operator">=</span> <span class="token string">"yellow"</span> isRight isPrimary <span class="token operator">/</span> <span class="token operator">&gt;</span>
<span class="token punctuation">)</span>

export const Component = styled . div `

/* // mặc định set background màu đỏ nếu không truyền vào props */

background: ${ ( { background } ) => background || "red"};

/* Lấy giá trị size từ theme */

font-size: ${ ( { theme } ) => theme.fontSize.sm};

/* Check điều kiện để lấy giá trị */

margin-left: ${ ( { isRight } ) => (isRight ? "20px" : "10px")};

/* Hoặc có thể truyền props multiline */

${ ( { isPrimary , theme } ) =>

isPrimary &&

css`

margin : 10 px 0 ;

padding : 0 10 px ;

color : $ { theme . colors . orange } ;

transition : all .3 s ;

`}

` ;

const Component = ( ) => (

< Component background = "yellow" isRight isPrimary / >

)

3. Selector to another element

Like traditional CSS, you can also selector to child or level elements.

<span class="token keyword">const</span> Link <span class="token operator">=</span> styled <span class="token punctuation">.</span> a <span class="token template-string"><span class="token string">`
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: white;
  color: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; theme.colors.red};

  /* Cách truyền thống */
  &amp;:hover svg {
    color: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; theme.colors.yellow};
  }
`</span></span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> Icon <span class="token operator">=</span> styled <span class="token punctuation">.</span> svg <span class="token template-string"><span class="token string">`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  /* Với styled components */
  </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> Link <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">:hover &amp; {
    fill: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; theme.colors.yellow};
  }
`</span></span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">SelectorDemo</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span> Link href <span class="token operator">=</span> <span class="token string">"#"</span> <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> Icon viewBox <span class="token operator">=</span> <span class="token string">"0 0 20 20"</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> path d <span class="token operator">=</span> <span class="token string">"M10 15h8c1 0 2-1 2-2V3c0-1-1-2-2-2H2C1 1 0 2 0 3v10c0 1 1 2 2 2h4v4l4-4zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z"</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> Icon <span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span> <span class="token operator">/</span> Link <span class="token operator">&gt;</span>
<span class="token punctuation">)</span> <span class="token punctuation">;</span>

const Link = styled . a `

display: flex;

align-items: center;

padding: 5px 10px;

background: white;

color: ${ ( { theme } ) => theme.colors.red};

/* Cách truyền thống */

&:hover svg {

}

` ;

const Icon = styled . svg `

flex: none;

transition: fill 0.25s;

width: 48px;

height: 48px;

/* Với styled components */

${ Link } :hover & {

fill: ${ ( { theme } ) => theme.colors.yellow};

}

` ;

const SelectorDemo = ( ) => (

< Link href = "#" >

< Icon viewBox = "0 0 20 20" >

< path d = "M10 15h8c1 0 2-1 2-2V3c0-1-1-2-2-2H2C1 1 0 2 0 3v10c0 1 1 2 2 2h4v4l4-4zM5 7h2v2H5V7zm4 0h2v2H9V7zm4 0h2v2h-2V7z" / >

< / Icon >

< / Link >

) ;

4. Inheriting styled but custom tagName

With the styled components you can also change the tag name from the original definition. Suitable for creating common but can flexibly change the HTML5 tag structure accordingly.

<span class="token keyword">const</span> Footer <span class="token operator">=</span> styled <span class="token punctuation">.</span> div <span class="token template-string"><span class="token string">`
  color: white;
  background: gray;
  margin-top: 50px;
  border-top: 2px solid yellow;
`</span></span> <span class="token punctuation">;</span>

<span class="token comment">// Thay đổi tag div =&gt; footer</span>
<span class="token operator">&lt;</span> Footer <span class="token keyword">as</span> <span class="token operator">=</span> <span class="token string">"footer"</span> <span class="token operator">&gt;</span> <span class="token operator">&lt;</span> <span class="token operator">/</span> Footer <span class="token operator">&gt;</span>

const Footer = styled . div `

color: white;

background: gray;

margin-top: 50px;

border-top: 2px solid yellow;

` ;

// Thay đổi tag div => footer

< Footer as = "footer" > < / Footer >

5. Add attributes via `attrs`

<span class="token keyword">const</span> Input <span class="token operator">=</span> styled <span class="token punctuation">.</span> input <span class="token punctuation">.</span> <span class="token function">attrs</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  type <span class="token punctuation">:</span> <span class="token string">"text"</span> <span class="token punctuation">,</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token template-string"><span class="token string">`
  border: 1px solid red;
  border-radius: 6px;
`</span></span> <span class="token punctuation">;</span>

const Input = styled . input . attrs ( ( ) => ( {

type : "text" ,

} ) ) `

border: 1px solid red;

border-radius: 6px;

` ;

6. Override existing / inline style

Usually it is used when you override the styled of an existing component in the library, for example you use reactstrap and want to customize the component, please see the demo below:

<span class="token keyword">const</span> MyStyledBox <span class="token operator">=</span> <span class="token function">styled</span> <span class="token punctuation">(</span> AlreadyStyledComponent <span class="token punctuation">)</span> <span class="token template-string"><span class="token string">`
  &amp;&amp;&amp; {
    color: palevioletred;
    font-weight: bold;
  }
`</span></span> <span class="token punctuation">;</span>

<span class="token comment">// Became</span>
<span class="token punctuation">.</span> MyBox <span class="token punctuation">.</span> MyBox <span class="token punctuation">.</span> MyBox <span class="token punctuation">{</span>
  color <span class="token punctuation">:</span> palevioletred <span class="token punctuation">;</span>
  font <span class="token operator">-</span> weight <span class="token punctuation">:</span> bold <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// Override Inline style</span>
<span class="token keyword">const</span> MyStyledComponent <span class="token operator">=</span> <span class="token function">styled</span> <span class="token punctuation">(</span> InlineStyledComponent <span class="token punctuation">)</span> <span class="token template-string"><span class="token string">`
  &amp;[style] {
    font-size: 12px !important;
    color: blue !important;
  }
`</span></span> <span class="token punctuation">;</span>

const MyStyledBox = styled ( AlreadyStyledComponent ) `

&&& {

color: palevioletred;

font-weight: bold;

}

` ;

// Became

. MyBox . MyBox . MyBox {

color : palevioletred ;

font - weight : bold ;

}

// Override Inline style

const MyStyledComponent = styled ( InlineStyledComponent ) `

&[style] {

font-size: 12px !important;

color: blue !important;

}

` ;

7. Definition of `keyframe` CSS3

<span class="token comment">&lt;!-- Cách truyền thống --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> style</span> <span class="token punctuation">&gt;</span></span> <span class="token style language-css">
  <span class="token atrule"><span class="token rule">@keyframes</span> bouncedelay</span> <span class="token punctuation">{</span>
    <span class="token selector">0%, 80%, 100%</span> <span class="token punctuation">{</span> <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">scale</span> <span class="token punctuation">(</span> 0.0 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> 
    <span class="token selector">40%</span> <span class="token punctuation">{</span> <span class="token property">transform</span> <span class="token punctuation">:</span> <span class="token function">scale</span> <span class="token punctuation">(</span> 1.0 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.bounce</span> <span class="token punctuation">{</span>		
    <span class="token property">animation</span> <span class="token punctuation">:</span> bouncedelay 1.4s infinite ease-in-out <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>	
</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> style</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">=</span> <span class="token punctuation">'</span> bounce <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> div</span> <span class="token punctuation">&gt;</span></span>

< style >

@keyframes bouncedelay {

0%, 80%, 100% { transform : scale ( 0.0 ) ; }

40% { transform : scale ( 1.0 ) ; }

}

.bounce {

animation : bouncedelay 1.4s infinite ease-in-out ;

}

</ style >

< div className = ' bounce ' > </ div >

<span class="token comment">// Styled components</span>
<span class="token keyword">const</span> bouncedelay <span class="token operator">=</span> keyframes <span class="token template-string"><span class="token string">`
  0%, 80%, 100% { transform: scale(0.0); } 
  40% { transform: scale(1.0); }
`</span></span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> Bounce <span class="token operator">=</span> styled <span class="token punctuation">.</span> div <span class="token template-string"><span class="token string">`
  animation: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> bouncedelay <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> 1.4s infinite ease-in-out;
`</span></span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">ComponentBounce</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span> Bounce <span class="token operator">/</span> <span class="token operator">&gt;</span>
<span class="token punctuation">)</span> <span class="token punctuation">;</span>

// Styled components

const bouncedelay = keyframes `

0%, 80%, 100% { transform: scale(0.0); }

40% { transform: scale(1.0); }

` ;

const Bounce = styled . div `

animation: ${ bouncedelay } 1.4s infinite ease-in-out;

` ;

const ComponentBounce = ( ) => (

< Bounce / >

) ;

8. Mixins pattern

<span class="token comment">// Mixin breakpoint</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> breakpoint <span class="token operator">=</span> <span class="token punctuation">{</span>
  xxs <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> css <span class="token template-string"><span class="token string">`
    @media (max-width: 576px) {
      </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token function">css</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">
    }
  `</span></span> <span class="token punctuation">,</span>
  xs <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> css <span class="token template-string"><span class="token string">`
    @media (max-width: 767.98px) {
      </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token function">css</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">
    }
  `</span></span> <span class="token punctuation">,</span>
  sm <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> css <span class="token template-string"><span class="token string">`
    @media (max-width: 991.98px) {
      </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token function">css</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">
    }
  `</span></span> <span class="token punctuation">,</span>
  md <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> css <span class="token template-string"><span class="token string">`
    @media (max-width: 1199.98px) {
      </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token function">css</span> <span class="token punctuation">(</span> <span class="token operator">...</span> args <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">
    }
  `</span></span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token comment">// Mixin position</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> position <span class="token operator">=</span> <span class="token punctuation">{</span>
  relative <span class="token punctuation">:</span> css <span class="token template-string"><span class="token string">`
    position: relative;
    left: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> left <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; left}px;
    top: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> top <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; top}px;
    right: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> right <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; right}px;
    bottom: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> bottom <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; bottom}px;
  `</span></span> <span class="token punctuation">,</span>
  absolute <span class="token punctuation">:</span> css <span class="token template-string"><span class="token string">`
    position: relative;
    left: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> left <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; left}px;
    top: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> top <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; top}px;
    right: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> right <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; right}px;
    bottom: </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> bottom <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">) =&gt; bottom}px;
  `</span></span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token comment">// Dùng mixin</span>
<span class="token keyword">const</span> Circle <span class="token operator">=</span> styled <span class="token punctuation">.</span> div <span class="token template-string"><span class="token string">`
  background: yellow;
  border: 1px solid yellow;
  </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> position <span class="token punctuation">.</span> position <span class="token interpolation-punctuation punctuation">}</span></span> 

   <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> breakpoint <span class="token punctuation">.</span> sm <span class="token template-string"><span class="token string">`
    display: flex;
    flex-direction: column;
  `</span></span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">
`</span></span> <span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">IconCircle</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span> Circle top <span class="token operator">=</span> <span class="token string">"10"</span> left <span class="token operator">=</span> <span class="token string">"150"</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
<span class="token punctuation">)</span> <span class="token punctuation">;</span>

// Mixin breakpoint

export const breakpoint = {

xxs : ( ... args ) => css `

@media (max-width: 576px) {

${ css ( ... args ) }

}

` ,

xs : ( ... args ) => css `

@media (max-width: 767.98px) {

}

` ,

sm : ( ... args ) => css `

@media (max-width: 991.98px) {

}

` ,

md : ( ... args ) => css `

@media (max-width: 1199.98px) {

}

`

} ;

// Mixin position

export const position = {

relative : css `

position: relative;

left: ${ ( { left } ) => left}px;

top: ${ ( { top } ) => top}px;

right: ${ ( { right } ) => right}px;

bottom: ${ ( { bottom } ) => bottom}px;

` ,

absolute : css `

position: relative;

`

} ;

// Dùng mixin

const Circle = styled . div `

background: yellow;

border: 1px solid yellow;

${ position . position }

${ breakpoint . sm `

display: flex;

flex-direction: column;

` }

` ;

const IconCircle = ( ) => (

< Circle top = "10" left = "150" / >

) ;

9. Planning how to be easy to manage

By now, you probably know quite a lot about this young man. I usually organize React projects with the structure as below, I think this is the best organization way to work with styled components.

- src/
|---index.js
|---App.js
|---components/
|  |---styles/
|  |  |---globalStyles.js
|  |  |---theme.js
|  |  |---mixin.js
|  |  |---images.js
|
|  |---common/
|  |  |---Form/
|  |  |  |---index.jsx
|  |  |  |---styled.js
|  |  |---Table/
|  |  |  |---index.jsx
|  |  |  |---styled.js
|
|  |---layout/
|  |  |---Header/
|  |  |  |---index.jsx
|  |  |  |---styled.js
|  |  |---Footer/
|  |  |  |---index.jsx
|  |  |  |---styled.js
|
|  |---pages/
|  |  |---About/
|  |  |  |---index.jsx
|  |  |  |---styled.js
|  |  |---Contact/
|  |  |  |---index.jsx
|  |  |  |---styled.js

- src/

|---index.js

|---App.js

|---components/

| |---styles/

| | |---globalStyles.js

| | |---theme.js

| | |---mixin.js

| | |---images.js

| |---common/

| | |---Form/

| | | |---index.jsx

| | | |---styled.js

| | |---Table/

| | | |---index.jsx

| | | |---styled.js

| |---layout/

| | |---Header/

| | | |---index.jsx

| | | |---styled.js

| | |---Footer/

| | | |---index.jsx

| | | |---styled.js

| |---pages/

| | |---About/

| | | |---index.jsx

| | | |---styled.js

| | |---Contact/

| | | |---index.jsx

| | | |---styled.js

Comment

Strength

Transmission is flexible props
Optimal good performance
Packaging is styled into the component, avoiding duplication selector problem
Nested, inherited, prefixed with SCSS and accessible

Limit

It takes a long time to define a component
Class names are randomly generated, so it is annoying for people who are familiar with debugging css with class names
CSS-in-JS writing style, so many people will not like it
Do not use ref on the component must switch to innerRef because the ref will be passed to the wrapper of the styled component instead of the component you want.

These days, you have to use tools

– Debug tool

With styled components, debugging CSS is not easy. However, ” thick tangerine peel with pointed nails, pointed nails had nail clippers “ . This is the official debug tool, you can follow this link to setup in source: https://styled-components.com/docs/tooling

– Extension VS Code

To increase the typing speed I often use these 2 children, there are many support features

Autocomplete & suggestion: https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx
Format, syntax highlight: https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

If you have more interesting tricks, please share more in the comments! Thanks bro.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Styled Components and organization

Why not use SCSS to styled.

Setting

Some tricks you may not know

1. Use the Context API

2. Flexible styled with props

3. Selector to another element

4. Inheriting styled but custom tagName

5. Add attributes via `attrs`

6. Override existing / inline style

7. Definition of `keyframe` CSS3

8. Mixins pattern

9. Planning how to be easy to manage

Comment

Strength

Limit

These days, you have to use tools

– Debug tool

– Extension VS Code

Apple công bố iOS 17: Nâng cấp tính năng cũ bên cạnh các công cụ mới

Apple ra mắt Mac Pro mới dùng M2 Ultra: Nhanh hơn 3 lần bản cũ, hỗ trợ tới 192 GB RAM, giá từ 164 triệu đồng

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

Why not use SCSS to styled.

Setting

Some tricks you may not know

1. Use the Context API

2. Flexible styled with props

3. Selector to another element

4. Inheriting styled but custom tagName

5. Add attributes via attrs

6. Override existing / inline style

7. Definition of keyframe CSS3

8. Mixins pattern

9. Planning how to be easy to manage

Comment

Strength

Limit

These days, you have to use tools

– Debug tool

– Extension VS Code

Apple công bố iOS 17: Nâng cấp tính năng cũ bên cạnh các công cụ mới

Apple ra mắt Mac Pro mới dùng M2 Ultra: Nhanh hơn 3 lần bản cũ, hỗ trợ tới 192 GB RAM, giá từ 164 triệu đồng

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

5. Add attributes via `attrs`

7. Definition of `keyframe` CSS3