use hooks - useTheme in Material UI

contactPage.js

import { useTheme } from '@material-ui/core/styles'

const useStyles = makeStyles(styles)

export default function ContactList () {

const theme = useTheme()

...

<TableCell>

<strong style={{ color: theme.palette.primary.main }}>

{name}

</strong>

index.js

import { ThemeProvider } from '@material-ui/styles'

import { createMuiTheme } from '@material-ui/core/styles'

import { green, orange, red, blue } from '@material-ui/core/colors'

const theme = createMuiTheme({

palette: {

primary: blue,

secondary: orange

},

status: {

danger: red

}

})

...

ReactDOM.render(

<ApolloProvider client={client}>

<StateProvider>

<ThemeProvider theme={theme}>

<Router history={hist}>

<Switch>

<PublicRoute exact path='/login' component={LoginPage} />

<PrivateRoute path='/admin' component={Admin} />

<Redirect from='/' to='/admin/dashboard' />

</Switch>

</Router>

</ThemeProvider>

</StateProvider>

</ApolloProvider>,

document.getElementById('root')

)

admin.js

const [color, setColor] = React.useState('blue')

<Sidebar

routes={routes}

logoText={'OCCopier'}

logo={logo}

image={image}

handleDrawerToggle={handleDrawerToggle}

open={mobileOpen}

color={color}

{...rest}

/>

material-dashboard-react.js

const primaryColor = ['#ed701b', '#ed701b', '#ed701b', '#ed701b']

const warningColor = ['#ff9800', '#ffa726', '#fb8c00', '#ffa21a']

sidebarStyle.js

blue: {

backgroundColor: primaryColor[0],

boxShadow:

'0 12px 20px -10px rgba(' +

hexToRgb(infoColor[0]) +

',.28), 0 4px 20px 0 rgba(' +

hexToRgb(blackColor) +

',.12), 0 7px 8px -5px rgba(' +

hexToRgb(infoColor[0]) +

',.2)',

'&:hover,&:focus': {

backgroundColor: primaryColor[0],

boxShadow:

'0 12px 20px -10px rgba(' +

hexToRgb(infoColor[0]) +

',.28), 0 4px 20px 0 rgba(' +

hexToRgb(blackColor) +

',.12), 0 7px 8px -5px rgba(' +

hexToRgb(infoColor[0]) +

',.2)'

}

},