Providers Theme

Question 1

Providers (theme)

Answer 1

Темы и провайдеры не ловятся в Компонентах
Только в стилях
В App:
const theme = createTheme(({
palette: {
primary: {
main: ‘#0fa685’
}
}

})) Тут можно задать light, dark или просто задается автоматически. Необходимо обернуть Контейнер ThemeProvider.

return (
    <div className="App">
        <ThemeProvider  theme = {theme}>
        <Container fixed>
        <ButtonAppBar/>
        <Grid container sx ={{ m: '20px'}}>
        <AddItemForm addItem={addTodolist}/>
        </Grid>

        {/*const el = document. createelement("div")*/}
        {/*el.classList.add("App")*/}
        {/*root.append(el)*/}

        <Grid container>
        {todolistComp}
        </Grid>
        </Container>
        </ThemeProvider>
    </div>
); }

Где прописываем стили указываем:
export const MenuButton = styled(Button)<MenuButtonProps>(({background, theme}) =>(
{
minWidth: '110px',
fontWeight: 'bold',
boxShadow: `0 0 0 2px ${theme.palette.primary.dark}, 4px 4px 0 0 ${theme.palette.primary.dark}`,
borderRadius: '2px',
textTransform: 'capitalize',
margin: '0 10px',
padding: '8px 24px',
color: theme.palette.primary.contrastText,
background: background || theme.palette.primary.light
}
))</MenuButtonProps>

Теперь можно применять эти стили, которые будут по цветам обновлять всю страницу, если мы отразили в ButtonAppBar

export default function ButtonAppBar() {
return (
<Box sx={{ flexGrow: 1, marginBottom: ‘80px’ }}>
<AppBar>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon></MenuIcon>
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<MenuButton color="inherit" background = {'orange'}>Login</MenuButton>
<MenuButton>Logout</MenuButton>
<MenuButton>Faq</MenuButton>
</Toolbar>
</AppBar>
</Box>
);
}