theme

Question 1

theme - создается в одном месте, чтобы в дальнейшем изменять цвета только в одном месте, а не прыгать по всему проекту

Answer 1

theme будет работать через провайдер или useTheme()

Пример 1.
В App:
const materialTheme = createTheme ({
palette: {
primary: {
main: ‘#088651’,
}
}
});
return (
<ThemeProvider theme={materialTheme}>
)

В стилях:
type MenuButtonProps = {
background?: string
}

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>

Пример 2.
const theme = useTheme()
<MenuButton color=”inherit” background={theme.palette.primary.light}>Login</MenuButton>