Chip custom theme -- redundant?

[codyswanner]

In Tag.js, a custom theme is being created to display tags in the Chip component. This custom theme overrides the default primary color to make this new color available to the chip. Is it possible, instead of creating a new theme, to simply add a 'tagChip' color to the existing top-level theme?

From Tag.js, currently:

const chipTheme = createTheme({
      palette: {
        primary: {
          main: alpha('#333333', 0.6),
        },
      }
    });
    return (
      <ThemeProvider theme={chipTheme}>
        <Chip color='primary' label={<TagLabel tagName={tagName}/>}/>
      </ThemeProvider>
    );

My idea would be something like this:

// App.js

const theme = createTheme({
    palette: {
      background: {
        default: '#666666',
      },
      tagChip: {
        primary: 'alpha(#333333, 0.6)'
      },
    },
    // other pieces of theme here
    }
  });

----------------------------------------------------------

// Tag.js, no createTheme anymore

return (
      <ThemeProvider theme={chipTheme}>
        <Chip color='tagChip.primary' label={<TagLabel tagName={tagName}/>}/>
      </ThemeProvider>
);

[codyswanner]

No, it's not possible, because MUI is fucking ridiculous. I don't even know if this is a problem with naming, format, some kind of dumb JS-to-CSS translation thing (the theme object rejects the name tag-chip as invalid which is fair enough, but I get wildly different (and irritatingly useless) errors from the component when I try tagChip vs tag-chip), and as is par for the course for MUI styling, I struggle to find good information on how to make anything beyond the most basic customizations, because whoever writes their docs doesn't seem to have a grasp of the concept that I'm reading this page because I DON'T KNOW, so you need to EXPLAIN things to me, not put up a single, incredibly narrow example and say "good luck!"

But anyways, resentments against MUI aside... This is more trouble than it's worth, and having the theme close by to edit has it's advantages (although if user customization of themes ever comes into play, that may flip back around). However, I did find that both Tag.js and ExcessTag.js are using this same structure (I think literally copy-pasted), so maybe moving it up one level and passing the same theme to both of them would be an easy and worthwhile improvement. See #137 that supersedes this issue.