Material UI : Reference other properties of createMuiTheme inside theme.ts file? - reactjs

Question

When importing theme like this (in filename.style.ts) :
import theme from 'common/theme';
I can access the different properties, like for example
theme.breakpoints.down('md')
I am trying to reference the same property inside the theme.ts file, but ofcourse.. theme. is not valid here, so i'm trying to to find a way i can re-use / reference it.
As you see on MuiTable i'm trying to access breakpoints and palette/primary.
theme.ts
import createMuiTheme from '#material-ui/core/styles/createMuiTheme';
export const MuiPaperBackgroundColor = '#f7f8f6';
export default createMuiTheme({
spacing: 8,
breakpoints: {
values: {
xs: 0, sm: 600, md: 960, lg: 1280, xl: 1650,
},
},
palette: {
primary: {
main: '#3f18aa',
extraLight: 'rgb(193, 181, 227)',
noDataColor: '#cccccc',
cardBgColor: '#ECECEC',
chartColors: [
'#E77F42',
'#F3C3A3',
],
},
overrides: {
MuiTable: {
root: {
whiteSpace: 'nowrap',
[theme.breakpoints.down('md')]: {
'& tr': {
'& td:first-child, & th:first-child': {
position: 'sticky',
left: 0,
backgroundColor: theme.palette.header.main,
color: theme.palette.primary.contrastText,
zIndex: 2,
},
},
},
},
},
},
});

Answer 1

Build your theme out of the individual material-ui packages. Here's how I did it:
import createMuiTheme from '#material-ui/core/styles/createMuiTheme';
import createBreakpoints from '#material-ui/core/styles/createBreakpoints';
const breakpoints = createBreakpoints({
// your settings
});
const theme = createMuiTheme({
breakpoints,
overrides: {
MuiTable: {
root: {
[breakpoints.down('md')]: {
// style
},
},
},
},
});

Answer 2

Ricky's solution is nice in praxis but Material warns against importing deeper than two levels (#material-ui/core/styles/foo in this case) because that is considered private and not part of any public contract. I.e., it can change any release.
It might not work with Breakpoints, but colours or fontWeights and such can be easily shared as plain constants declared before. But I am also sceptical if it's a good idea to include responsiveness in this declaration in first place.

Answer 3

You can attach the props after the theme is declared.
let theme = createMuiTheme({
overrides: {
MuiAppBar: {
root: {
transform: 'translateZ(0)'
}
}
},
props: {
MuiIconButton: {
disableRipple: true
}
}
});
theme = responsiveFontSizes(theme);
theme.overrides.MuiCssBaseline = {
'#global': {
'.testMe': {
color: 'red'
},
'.container-std': {
[theme.breakpoints.up('lg')]: {
maxWidth: '1200px',
marginLeft: 'auto',
marginRight: 'auto'
}
},
'.container-wide': {
margin: theme.spacing(2, 2)
}
}
};