Apply custom styling through MUI theme definition

[AgrYpn1a]

Is your feature request related to a problem? Please describe.

I am not sure whether there's just documentation missing or this isn't possible yet, but I was unable to figure out how to do it.

Describe the solution you'd like

In my project I have defined a theme for MUI stylings, and the TipTap is properly using them. However, in my case, I need to be able to override styles for particular components, only when they're used inside TipTap. For example, here's how I can style a button from a theme definition file:

createTheme({ 
  components: {
      MuiInputBase: {
          styleOverrides: {
              root: {
                  height: '32px',
              },
              input: {
                  fontSize: '14px',
                  fontWeight: 400,
              },
          },
      },
  }
})

In a similar fashion, I'd like to be able to select the tiptap root and then apply relative styling for classes that are inside it, maybe something like this:

createTheme({ 
  components: {
      MuiTipTap: {
         styleOverrides: {
            // some styling for the texteditor maybe?
          },
         '& .MenuButton-root': {
            background: 'blue'
         }
      }
  }
})

I understand I can wrap the editor in a box and then put styling in there and select classes I need to change, but it would be much better to be able to select the editors components from the theme. Thank you!

[sjdemartini]

This is an interesting idea. The motivation definitely makes sense. I haven't used this type of functionality much within MUI but seems like it could be useful to support with mui-tiptap. I don't have time at the moment to dig into this myself, but if it's straightforward to add, open to suggestions around implementation and/or PRs later.

[MuzzyCo]

In my project I have defined a theme for MUI stylings, and the TipTap is properly using them.

Hi, can you btw suggest, hot to do it? In my application mui-tiptap does not use mui theme styles, how did you do it?

[sjdemartini]

(For my reference later) This seems relevant to the request here https://mui.com/material-ui/customization/creating-themed-components/. I haven't used this before, and seems it may require some fairly significant refactoring compared to the existing usage of tss-react for styles within mui-tiptap now, but maybe the right approach if we want this theme-based customizability of individual components to be possible.

[sjdemartini]

Side note that with MUI v6, when using themed components, we should probably try to avoid patterns that are not compatible with pigment CSS, like https://mui.com/material-ui/migration/migrating-to-pigment-css/#migrating-custom-theme