Error: MUI: Unsupported var(--mui-palette-common-white) color.

[Hammad1029]

I just followed the example in the getting started section of the documentation. This is my code:

const rteRef = useRef<RichTextEditorRef>(null);

 <RichTextEditor
              ref={rteRef}
              extensions={[]}
              content="<p>Hello world</p>"
              renderControls={() => (
                <MenuControlsContainer>
                  <MenuSelectHeading />
                  <MenuDivider />
                  <MenuButtonBold />
                  <MenuButtonItalic />
                </MenuControlsContainer>
              )}
            />

But I keep getting this error:

Unhandled Runtime Error
Error: MUI: Unsupported `var(--mui-palette-common-white)` color.
The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().

Any clues as to why?

[checho221]

Did you fixed ?

[sjdemartini]

Would either of you have more detailed steps to reproduce the issue? Could you demonstrate in a CodeSandbox for instance? I haven't seen an error like this before.

Also would be useful to see a larger traceback from the error.

[checho221]

Hello @sjdemartini

We configure var(--mui-palette-common-white) as css global var for MUI.

I make a temporal fix by wrapping entire TipTap module on a new theme like this:

`'use client';

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { Button } from "@mui/material";
import StarterKit from "@tiptap/starter-kit";
import {
MenuButtonBold,
MenuButtonItalic,
MenuControlsContainer,
MenuDivider,
MenuSelectHeading,
RichTextEditor,
type RichTextEditorRef,
} from "mui-tiptap";
import { useRef } from "react";

const theme = createTheme();

export default function Rte() {
const rteRef = useRef(null);

const renderControls = () => {

    return <MenuControlsContainer>
        <MenuSelectHeading />
        <MenuDivider />
        <MenuButtonBold />
        <MenuButtonItalic />
    </MenuControlsContainer>
}



return (
    <ThemeProvider theme={theme}>
        <div>
            <RichTextEditor
                ref={rteRef}
                extensions={[StarterKit]} // Or any Tiptap extensions you wish!
                content="<p>Hello world</p>" // Initial content for the editor
                // Optionally include `renderControls` for a menu-bar atop the editor:
                renderControls={renderControls}
            />

            <Button onClick={() => console.log(rteRef.current?.editor?.getHTML())}>
                Guardar
            </Button>
        </div>
    </ThemeProvider>
);

}`

and my color-schemes.ts is like this:

light: { palette: { action: { disabledBackground: 'rgba(0, 0, 0, 0.06)' }, background: { default: 'var(--mui-palette-common-white)', defaultChannel: '255 255 255', paper: 'var(--mui-palette-common-white)', paperChannel: '255 255 255', level1: 'var(--mui-palette-neutral-50)', level2: 'var(--mui-palette-neutral-100)', level3: 'var(--mui-palette-neutral-200)', }, common: { black: '#000000', white: '#ffffff' }, divider: 'var(--mui-palette-neutral-200)', dividerChannel: '220 223 228', error: { ...redOrange, light: redOrange[400], main: redOrange[500], dark: redOrange[600], contrastText: 'var(--mui-palette-common-white)', }, ....... }

[sjdemartini]

You may be able to confirm if you look at the full traceback, but it looks like this is caused by mui-tiptap using MUI's color utils on MUI theme variables (like this

mui-tiptap/src/styles.ts

Line 220 in fde6c3e

: darken(theme.palette.secondary.dark, 0.1),

), specifically when the theme variables are set as CSS vars as you mentioned you're using above. This issue seems related mui/material-ui#43324

I'm not sure if there's a recommended approach for handling this sort of scenario, as I haven't used CSS vars with MUI myself. Do you know?