Use theme (material ui) in overrides...

Create your theme:

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import indigo from '@material-ui/core/colors/indigo';
import red from '@material-ui/core/colors/red';

const theme = createMuiTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: indigo[500],
},
error: {
main: red[500],
},
},
typography: {
fontFamily: '"Ubuntu sans-serif"',
},
});


Then, use it in overrides:

theme.overrides = {
...theme.overrides,
MuiCssBaseline: {
'@global': {
html: {
WebkitFontSmoothing: 'auto',
backgroundColor: 'black',
padding: '0',
margin: '0',
outline: 'none',
boxSizing: 'border-box',
},
body: {
fontFamily: 'Ubuntu sans-serif',
},
a: {
textDecoration: 'none',
color: theme.palette.error.main,
},
},
},
};
export default theme;

In that way you can use the pre-determinated colors just right here.