[question] How to use Material UI Sync plugin to actually use tokens in code

[rkristelijn]

The problem in depth

I am using the 'vanilla' version of the MUI Sync plugin. When downloading the theme.json file I would only expect the exceptions that would be made on top of the default MUI theme. However out of the box, the theme.json file is larger than expected (125K) without any customizations. There is limited documentation how to actually use the theme.json file in code. So I tried to the best i could to use it, however I see unexpected things, like the default MUI button with a width of 355px. If I delete the MuiButton override from theme.json the issues goes away.

I'm wondering if I'm using it correctly, as a developer I'd rather download the generated theme.json rather than copy pasting code for (me) obvious reasons on codestyling and linting and copy/paste errors.

My implementation:

// tsconfig.json
{
  "compilerOptions": {
    "resolveJsonModule": true,
...

import { createTheme, type ThemeOptions } from '@mui/material/styles';
import { Roboto } from 'next/font/google';

import themeJson from './theme.json';
import deepmerge from 'deepmerge';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

// I would expect these overrides not needed, just some of them to make the point
const customTheme: ThemeOptions = {
  palette: {
    contrastThreshold: 4.5,
    primary: {
      main: '#CCCCCC', // our brand color, we have another value though
    },
  },
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
  components: {
    MuiListItem: {
      defaultProps: {
        disablePadding: true,
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
        },
      },
    },
    MuiTab: {
      styleOverrides: {
        root: {
          textTransform: 'none',
        },
      },
    },
  },
};

export const theme = extendTheme(deepmerge(themeJson, customTheme));
// seems extend or create doesn't matter
// export const theme = createTheme(deepmerge(themeJson, customTheme));

The weird thing is though the MUIButton in theme.json seems to be contain extremely much overrides for the button alone, if I remove them, the file shrinks to 12K.

Your environment

Material UI Sync Plugin v6.1.0 @mui/material version ^6.1.4

Search keywords: Material UI Sync Theme Design Tokens