# styled-components styled-components is a CSS-in-JavaScript library for styling React components. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## How to Structure and Organize a React Application DevFeed: [How to Structure and Organize a React Application]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2021-06-23T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [React](), [structure](), [React Hooks](), [Redux](), [React Router](), [styled-components](), [Jest](), [testing-library](), [Authentication]() Tags: [authentication](), [css](), [how-to](), [javascript](), [jest](), [react](), [react-hooks](), [react-router](), [redux](), [state-management](), [structure]() ### AI overview This tutorial presents an opinionated, feature-focused directory structure for organizing large-scale production React applications. It explains how to separate global shared components from feature-specific code and discusses accompanying choices for Redux, React Router, styling, testing, and authentication. ### Source excerpt There is no consensus on the right way to organize a React application. React gives you a lot of freedom, but with that freedom comes the... ## Theme with styled-components and Typescript DevFeed: [Theme with styled-components and Typescript]() Original publisher: [Read original article]() Author: Ethan Nguyen Published: 2020-07-14T12:58:19Z Content type: tutorial Language: en Sources: [RBI Tech]() Topics: [styled-components](), [TypeScript](), [CSS](), [Design system](), [modern web development]() Tags: [css](), [dark-mode](), [design-system](), [design-systems](), [how-to](), [javascript](), [styled-components](), [themes](), [typescript](), [visual-studio-code]() ### AI overview A tutorial on theming applications with styled-components and TypeScript. It covers installation, Visual Studio Code support, declaration files, theme interfaces, naming conventions, theme creation, ThemeProvider setup, and switching between themes. ### Source excerpt What is styled-components? Styled-components is arguably the most common CSS-in-JS library out there (Don't trust me? Check out their site and their adoption from many organizations, 7.6M/month downloads on NPM 🔥). One of its advanced use cases for this library is theming. Theming in styled-components allows your app to support multiple design patterns within the same app. Imagine an amazing code editor with no dark mode! Having options to customize the look and feel of your app from the primary colour palette to the typography scale can help our system to capture more personas. This article will give some breakdown of the basic setup and naming convention for theming your app with styled-components, and how to setup Typescript with styled-components themes Installationyarn add styled-components yarn add @types/styled-components -DVSCode plugin If you are using Visual Studio Code, I highly recommend installing this helpful plugin. It will highlight and IntelliSense your syntax for styled-components Create a declaration file Firstly, we will need to define how our theme interface looks like. Inside src folder, create styled.d.ts file and extend the existing styled-component DefaultTheme. This will help with IntelliSense and ensure a contract for all available themes. // styled.d.ts import 'styled-components';interface IPalette { main: string contrastText: string }declare module 'styled-components' { export interface DefaultTheme { borderRadius: string palette: { common: { black: string white: string } primary: IPalette secondary: IPalette } } }Naming convention Let's break down some logic here for the naming convention of theming. As I mentioned earlier, our goal for theming a system is to be able to control the compactness and colour palette. Hence we should define our theme around these styles like border-radius font-weight font-size ... and all colour related. About colour naming, avoid naming variable with actual colour but do name with something likeprimary or sec ## Using Tailwind CSS with Gatsby, React & Emotion Styled Components DevFeed: [Using Tailwind CSS with Gatsby, React & Emotion Styled Components]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2019-10-20T14:08:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Tailwind CSS](), [gatsby](), [React](), [styled-components](), [CSS](), [PostCSS](), [Babel](), [Web Development]() Tags: [babel](), [components](), [css](), [css-in-js](), [emotion](), [gatsby](), [insights](), [learn](), [postcss](), [project](), [react](), [styled](), [styled-components](), [tailwind](), [tailwind-css](), [utility-first]() ### AI overview A tutorial on combining Tailwind CSS with Gatsby and React through Emotion Styled Components. It explains a hybrid setup using twin.macro for component-level Tailwind styles and PostCSS for Tailwind's base and global styles. ### Source excerpt Learn how to use the utility-first Tailwind CSS with Emotion "CSS-in-JS" Styled Components in a Gatsby JS + React project. ## Screenshot testing with React and Storybook DevFeed: [Screenshot testing with React and Storybook]() Original publisher: [Read original article]() Author: Jesse Pinho Published: 2018-03-19T09:18:02Z Content type: tutorial Language: en Sources: [Bleeding Edge - Medium]() Topics: [screenshot-testing](), [Storybook](), [React](), [Testing](), [styled-components](), [Selenium]() Tags: [continuous-integration](), [react](), [screenshot-testing](), [selenium](), [storybook](), [styled-components](), [testing](), [visual-regression-testing]() ### AI overview The article explains why end-to-end UI tests can miss visual regressions and explores screenshot testing with React and Storybook to check component appearance across different states. ### Source excerpt Visual regression testing for fun, profit, and peace of mind Illustration by Marta Pucci A friend of mine recently related a scary story about the lack of automated visual regression testing where he works--a huge international tech firm that you've heard of and probably use. He'd added a CSS class to an element to hide it from the user. Unbeknownst to him, and despite using BEM-style naming for CSS classes, this class name was already being used for an important checkbox in the user settings screen of his company's web app. The result? Users could no longer change the setting represented by the checkbox, because it was invisible! I asked him why that hadn't been caught by automated tests. He explained that, although they did have end-to-end tests in place that went through the UI and tested its functionality, the tests didn't catch the bug. Selenium was still able to check the original checkbox via its selector, so its visibility had no effect on the outcome of the test. The only way this could have been caught is via visual regression testing -- or, as it is sometimes called, screenshot testing. 💅 Switching to styled-components I recalled this story recently while working on a sizable project at Clue: converting all of our "native" CSS to use styled-components. The new helloclue.com website consists of dozens of components. An article page, for example, contains at least ten different React components, all of which have accompanying CSS files. Converting all of this CSS to styled-components means there's an enormous risk of bugs exactly like the one my friend experienced. So before the project began, I investigated setting up screenshot testing for the site. 📕 Enter Storybook (Note: if you're already familiar with Storybook and @storybook/react, feel free to skip to the next section.) We use Storybook when developing simple presentational components. This way, we can test them in every possible state, without having to reproduce all the logic and so forth required t