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 Top answer 1 of 4
21
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;
}
}
2 of 4
18
Inside your src folder, create a new folder named @types and put your file styled.d.ts inside this folder. The content is the same as below.
import 'styled-components';
import theme from "your_theme_path";
type CustomTheme = typeof theme;
declare module "styled-components" {
export interface DefaultTheme extends CustomTheme {}
}
It has worked for me.
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.
Videos
17:45
How to toggle Theme using Styled Components in Next.js - YouTube
20:38
Creating Themes for React Styled Components - YouTube
09:13
Styled Component in React in Hindi #4: Theme Provider in Styled ...
11:56
React Dark Theme Toggle With Styled Components Tutorial - YouTube
57:06
Building a React Timer with Styled-Components and Theme Provider ...
03:19
React Styled Components - 9 - Theming - YouTube
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 React from 'react'; import { ThemeProvider } from 'styled-components'; import { useThemeMode } from '../../hooks/useThemeMode'; import { lightTheme, darkTheme } from '../../styles/themes'; const ThemeContext: React.FC = ({ children }) => { const { theme } = useThemeMode(); const themeMode = theme === 'dark' ?
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
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
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
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;
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
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%
jsDocs.io
jsdocs.io › package › styled-components
styled-components@6.3.5 - jsDocs.io
January 16, 2026 - If you need access to the theme in an uncertain composition scenario, React.useContext(ThemeContext) will not emit an error if there is no ThemeProvider ancestor. ... Override DefaultTheme to get accurate typings for your project. // create styled-components.d.ts in your project source