It's described in the official documentation.

In a .d.ts file add this:

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
     borderRadius: string;
     color: string;
  }
}

Answer from Sérgio Junior on Stack Overflow
🌐
styled-components
styled-components.com › docs › advanced
styled-components
This example renders our above themed Button and a second one that uses a second ThemeProvider to invert the background and foreground colors.
🌐
DEV Community
dev.to › rajuashok › create-styled-d-ts-to-make-typescript-work-with-styled-components-5dk4
Create styled.d.ts to make Typescript work with styled-components - DEV Community
September 19, 2020 - import { ThemeProvider } from 'styled-components'; import theme from './theme'; const App = () => ( {/* theme obj being passed down through ThemeProvider */} <ThemeProvider theme={theme}> <Button>Click Me</Button> </ThemeProvider> ) // button.tsx const Button = styled.button` color: ${props => ( props.theme.primary /* accessing props.theme */ )}; background-color: ${props => props.theme.background}; `;
🌐
GitHub
github.com › styled-components › styled-components › issues › 1589
Strongly typed theme property · Issue #1589 · styled-components/styled-components
March 8, 2018 - Hi, I am using TypeScript and ThemeProvider for my components, and I had a couple of questions: First of all, my components are created using map, so I used to assign a key to each one, now I have put ThemeProvider to be the top parent c...
Author   farzadmf
🌐
Medium
medium.com › rbi-tech › theme-with-styled-components-and-typescript-209244ec15a3
Theme with styled-components and Typescript | by Ethan Nguyen | RBI Tech | Medium
July 14, 2020 - // theme.ts import { DefaultTheme } from 'styled-components'export const defaultTheme: DefaultTheme = { borderRadius: '4px', palette: { common: { black: '#222831', white: '#ffffff' }, primary: { main: '#726a95', contrastText: '#ffffff' }, secondary: { main: '#709fb0', contrastText: '#ffffff' } } } Now the easy part, once we got the theme object, import to your root component along with ThemeProvider and wrap your root App.
🌐
DEV Community
dev.to › viniciusmdias › how-to-create-a-theme-in-react-typescript-with-styled-components-3fn
How to create a Theme in React/Typescript (Context API) with styled-components - DEV Community
September 23, 2021 - import { ThemeProvider } from 'styled-components'; import TogglerButton from './components/TogglerButton'; import GlobalStyle from './styles/global'; import ThemeContext from './contexts/ThemeContext'; import { lightTheme, darkTheme } from './styles/themes'; import useThemeMode from './hooks/useThemeMode'; function App() { const { theme, themeToggler } = useThemeMode(); const themeMode = theme === 'light' ?
🌐
JavaScript in Plain English
javascript.plainenglish.io › themes-within-themes-with-react-typescript-and-styled-components-e65491e45f5e
Themes within themes with React, TypeScript and Styled Components ✨ | by Catherine Oxley | JavaScript in Plain English
September 8, 2022 - Now, because our Wrapper sits within the ThemeProvider, it also has access to the ‘theme’ prop automatically. So we can now use the variables that we’ve set up in our /themes folder, using object de-structuring of the ‘theme’ prop: // DemoContainer.style.tsimport styled from 'styled-components';export const Wrapper = styled.main` // let's put all our global typography at the top ${({theme}) => theme.typography}; height: 100vh; width: 100%; padding: 60px; background-color: ${({theme}) => theme.colors.primary.primary1}; color: ${({theme}) => theme.colors.secondary.secondary2};`;
🌐
GitHub
github.com › styled-components › styled-components › issues › 1847
Typescript error in docs example for ThemeProvider · Issue #1847 · styled-components/styled-components
July 13, 2018 - When implementing the docs example of how to use ThemeProvider in a Typescript project, the following error appears: Exported variable ThemeProvider has or is using name React.ComponentClass from external module ./node_modules/@types/react/index but cannot be named. ... const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents as ThemedStyledComponentsModule<ThemeInterface>;
Author   teddybradford
Find elsewhere
🌐
GitHub
gist.github.com › chrislopresto › 490ef5692621177ac71c424543702bbb
styled-components v4 + createGlobalStyle + TypeScript · GitHub
import * as styledComponents from 'styled-components/native'; import {ReactNativeThemedStyledComponentsModule} from 'styled-components/native'; import {Theme} from '../themes'; const { default: styled, css, ThemeProvider, } = styledComponents as ReactNativeThemedStyledComponentsModule<Theme>; export {css, ThemeProvider}; export default styled; Copy link ·
🌐
GitHub
gist.github.com › 84210966cc8822d88260c3c08c891981
ThemeProvider combining styled-components and material-ui in typescript · GitHub
December 7, 2021 - ThemeProvider combining styled-components and material-ui in typescript - ThemeProvider.tsx
🌐
Stack Overflow
stackoverflow.com › questions › 49181662 › styled-components-strongly-typed-theme-property
reactjs - styled-components strongly typed [theme] property - Stack Overflow
September 3, 2018 - Then, TypeScript will complain that theme doesn't exist on ComponentProps, but if I don't define the type for the props, then when I want to create my custom component: ... You can create a container, and pass any property you like. Like this: ... import { ThemedStyledFunction } from 'styled-components'; export const styledWithProps = <U>() => <P, T, O>( fn: ThemedStyledFunction<P, T, O> ): ThemedStyledFunction<P & U, T, O & U> => fn;
🌐
DEV Community
dev.to › canastro › react-ui-kit-with-ts-styled-components-adding-a-theme-part-ii-of-ii-2745
React ui-kit with TS & styled-components: Adding a theme - Part II of II - DEV Community
August 20, 2019 - In order to use this theme we're going to use the styled-components ThemeProvider, the usage would be something like this:
🌐
Medium
medium.com › @ibrahimtrg18 › mastering-styled-components-and-typescript-a-comprehensive-guide-17bd5eee7de6
Mastering Styled Components and TypeScript: A Comprehensive Guide | by Ibrahim Tarigan | Medium
April 10, 2024 - Now that we’ve defined our theme, we can proceed with applying it to our application. To do this, we’ll wrap our App component with the ThemeProvider from styled-components.
🌐
DEV Community
dev.to › boywithsilverwings › theming-with-styled-components-3ig2
Theming with Styled Components - DEV Community
March 4, 2020 - Styled Components family has a library called styled theming. It has an easier API for creating and maintaining variant based styles. For eg. To create a button that would be different in light and dark mode: import styled, {ThemeProvider} from ...
🌐
GitHub
github.com › styled-components › styled-theming
GitHub - styled-components/styled-theming: Create themes for your app using styled-components
<ThemeProvider> is part of styled-components, but is required for styled-theming. import {ThemeProvider} from 'styled-components'; <ThemeProvider> accepts a single prop theme which you should pass an object with either strings or getter functions.
Starred by 1.2K users
Forked by 25 users
Languages   JavaScript 97.6% | HTML 2.4% | JavaScript 97.6% | HTML 2.4%
🌐
GitHub
github.com › styled-components › styled-components-website › issues › 447
Better TypeScript setup for themes · Issue #447 · styled-components/styled-components-website
April 13, 2019 - // import original module declarations ... declarations using custom theme type type Theme = typeof theme declare module 'styled-components' { export interface DefaultTheme extends Theme {} }...
Author   mulholo
🌐
Newline
newline.co › @kchan › annotating-react-styled-components-with-typescript--e8076d1d
Annotating React Styled Components with TypeScript | newline
November 24, 2021 - Styled components redefine how we apply CSS styles to React components. Unlike the traditional approach of manually assigning CSS classes (from an imported CSS file) to elements within a component, CSS-in-JS libraries like styled-components ...
🌐
GitHub
github.com › styled-components › styled-components › issues › 2960
Default theme for components without parent ThemeProvider · Issue #2960 · styled-components/styled-components
January 13, 2020 - Create a library constructor module that re-exports the whole library scoped to a custom context: const {styled, ThemeProvider} = createStyledComponents(defaultTheme) Allow anything that subscribes to context to take a custom context reference as a prop, which could be set to a custom context that does have a default value. This is what Redux does for connected components.
Author   alexkrolick