# styled-components Published articles for styled-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. ## 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. ## Eschewing Shadow DOM DevFeed: [Eschewing Shadow DOM]() Original publisher: [Read original article]() Author: Heydon Pickering Published: 2019-06-14T00:00:00Z Content type: article Language: en Sources: [The Every Layout Blog]() Topics: [Web Components](), [CSS](), [modern web development](), [React](), [styled-components]() Tags: [css](), [custom](), [element](), [react](), [styled-components]() ### AI overview An examination of styling problems encountered with Shadow DOM, including inconsistent universal styles, limited inheritance, slot restrictions, and specificity issues. The author proposes an experimental alternative for web components that namespaces and embeds prop-derived instance styles in the document head. ### Source excerpt Regarding styling, Shadow DOM is really good at one thing: preventing per-component styles from leaking out and affecting other parts of the document. Unfortunately, Shadow DOM also has a very opinionated way of preventing styles being applied from the parent document. Here is a roundup of the quirks and associated issues I've encountered: Shadow DOM styling issues Universal styles Some universal styles (using the * selector) are applied, and others are not. The color property appears to pierce shadow boundaries, but I've had no luck with box-sizing. Having to set box-sizing: border-box for each component is redundant. Inheritance Document styles are inherited in Shadow DOM. But inheritance only gets you so far, especially since not all properties are inheritable by default anyway. I've tried hacking things together with the explicit inherit keyword, but that seems to have no effect. Using the following is no good, because it forces every node to inherit every property from the parent. If had display: flex applied, every one of the component's descendants would adopt it. * { all: inherit; /* yikes */ } Slot restrictions For performance reasons, the ::slotted() selector, which allows you to style the Light DOM content of your component from within your Shadow DOM, only lets you affect child elements and not descendants at depth. This is a bit restrictive. Worse, you cannot seem to use sibling combinators like + or ~. None of the following works: ::slotted(*) + * /* Nope */ ::slotted(* + *) /* Nope */ ::slotted(*) + ::slotted(*) /* Nope */ Specificity In making layout components, I like to take a progressive approach: style the component and its Light DOM nodes in my document stylesheet, then enhance with instance-specific styles via props (attributes) in Shadow DOM. For a component instance that looks like this... ...I would apply the itemWidth value in the Shadow DOM using interpolation: `