diff --git a/README.md b/README.md index 22d47d0..bc0ac64 100644 --- a/README.md +++ b/README.md @@ -46,19 +46,19 @@ Integrate Skiff components into your project easily, as shown below: [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/button-example-rfp4jn) -## ThemeProvider -To display Skiff UI components correctly, add the ThemeProvider at the root of your app. +## AppThemeProvider +To display Skiff UI components correctly, add the AppThemeProvider at the root of your app. ```typescript import * as React from 'react'; - import { ThemeProvider } from '@skiff-org/skiff-ui'; + import { AppThemeProvider } from '@skiff-org/skiff-ui'; function App({ Component }) { return ( - + - + ); } ``` diff --git a/src/theme/AppThemeProvider.tsx b/src/theme/AppThemeProvider.tsx index 800a4b0..9e98898 100644 --- a/src/theme/AppThemeProvider.tsx +++ b/src/theme/AppThemeProvider.tsx @@ -1,5 +1,5 @@ import noop from 'lodash/noop'; -import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'; +import React, { PropsWithChildren, createContext, useCallback, useContext, useEffect, useState } from 'react'; import { LocalStorageThemeMode, StorageOnlyThemeMode, ThemeMode } from 'src/types'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; @@ -38,7 +38,7 @@ const GlobalStyles = createGlobalStyle` font-smoothing: antialiased; } `; -export const AppThemeProvider: React.FC = ({ children }) => { +export const AppThemeProvider: React.FC> = ({ children }) => { const [themeName, setThemeName] = useState(ThemeMode.DARK); const [storedThemeState, setStoredThemeState] = useState(StorageOnlyThemeMode.SYSTEM);