Demystifying styled-components

This content originally appeared on Bram.us and was authored by Bramus!

Josh W. Comeau lays out the details how styled-components works internally.

For so many React devs, styled-components seems kinda magical. It isn’t at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we’ll learn exactly how styled-components works by building our own mini-version.

const styled = (Tag) => (styles) => {
  return function NewComponent(props) {
    const uniqueClassName = comeUpWithUniqueName(styles);
    createAndInjectCSSClass(uniqueClassName, styles);

    return <Tag className={uniqueClassName} {...props} />
  }
}

styled.h1 = styled('h1');
styled.button = styled('button');
// ...And so on, for all DOM nodes!

Demystifying styled-components →

This content originally appeared on Bram.us and was authored by Bramus!

Print Share Comment Cite Upload Translate Updates

APA

Bramus! | Sciencx (2021-06-30T15:18:53+00:00) Demystifying styled-components. Retrieved from https://www.scien.cx/2021/06/30/demystifying-styled-components/

MLA

" » Demystifying styled-components." Bramus! | Sciencx - Wednesday June 30, 2021, https://www.scien.cx/2021/06/30/demystifying-styled-components/

HARVARD

Bramus! | Sciencx Wednesday June 30, 2021 » Demystifying styled-components., viewed ,<https://www.scien.cx/2021/06/30/demystifying-styled-components/>

VANCOUVER

Bramus! | Sciencx - » Demystifying styled-components. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/30/demystifying-styled-components/

CHICAGO

" » Demystifying styled-components." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/06/30/demystifying-styled-components/

IEEE

" » Demystifying styled-components." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/06/30/demystifying-styled-components/. [Accessed: ]

rf:citation

» Demystifying styled-components | Bramus! | Sciencx | https://www.scien.cx/2021/06/30/demystifying-styled-components/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.