Use to develop your Theme object dynamically
npm install --save theme-tweaker
// index.tsx
import './index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {createThemeTweaker} from 'theme-tweaker'
export type Theme = {my: string};
const theme: Theme = {my: 'theme'};
const Provider = createThemeTweaker();
ReactDOM.render(
<Provider theme={theme}>
<App />
</Provider>
, document.getElementById('root'))
Pass that library theme provider to the createThemeTweaker function and use the returned Provider the same way.
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {theme} from './theme/theme';
import MuiProvider from '@material-ui/styles/ThemeProvider';
import { createThemeTweaker } from './theme/themeTweaker/themeTweaker';
const isDev = process.env.NODE_ENV === "development";
const ThemeProvider = isDev ? createThemeTweaker(MuiProvider) : MuiProvider;
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
,
document.getElementById('root')
);
import {useThemeTweaker} from 'theme-tweaker';
import React from 'react';
import {Theme} from './index';
const App = () => {
const {theme, setThemeProp} = useThemeTweaker<Theme>();
return (
<div>
<button onClick={() => setThemeProp("my", "edited theme")}>Change</button>
{JSON.stringify(theme)}
</div>
);
}
export default App
MIT © guygolanIL