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 { 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
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;
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
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