Ability to change RichTextField Border color

[matdemers1]

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

In the current project that I am working on we have a error state for form fields that highlights the outside of the dropdown or text field red. We would like to continue this pattern with this rich text field. Using class overrides in the props I am able to make the bottom border of the header red but I am not able to change the outside border of the TextArea red. Attached below are pictures of what am able to do at this point and what I would like to be able to do.

Here is a snippet of the code that ive tried to override the outer border... I've tried to work with all the code commented out but with no effect

<RichTextField
      // classes={{
      //   content: styles.formError,
      //   outlined: styles.formError,
      //   standard: styles.formError,
      //   root: styles.formError,
      //   menuBar: styles.formError,
      //   menuBarContent: styles.formError,
      // }}
      // RichTextContentProps={{
      //   className: styles.formError,
      //   classes: { root: styles.formError, editable: styles.formError },
      // }}
      MenuBarProps={{ className: styles.formError }}
      // className={styles.formError}
      disabled={inputDisabled}

Describe the solution you'd like

Ideally it would be awesome to have an error prop but that seems like a huge lift. I believe the easiest solution for my problem would to be able to override the classes.notchedOutline styling in the FieldContainer.tsx file. Im not sure if that could be handled like the other fields in the RichTextField classes override that i tried above

Describe alternatives you've considered

open to any suggestions

Additional context

What ive been able to do so far

What I am aiming to do

[sjdemartini]

Thanks @matdemers1 for the detailed issue and screenshots. Super helpful explanation and good to know what you'd explored. What you're describing you want makes a ton of sense!

I think the easiest workaround for now would be to target mui-tiptap's static class names for the relevant components, like I've put together in this CodeSandbox. i.e., in some outer parent component class, like the class for your RichTextField, you can target its contained notched outline and MenuBar with CSS like this.

          "&& .MuiTiptap-FieldContainer-notchedOutline, && .MuiTiptap-MenuBar-root":  {
              borderColor: "red",
            },

I haven't yet documented these static class names but plan to at some point. Ideally this sort of style-overriding would be a bit easier than it is now. You had a few good suggestions too (allowing folks to assign a class to the notchedOutline directly, and having an error state prop that does this red styling), which I'll also explore.

[matdemers1]

That worked perfectly thank you so much

[ahmadichsan]

Hi @sjdemartini, I would like to ask, I need to change the RichTextField border color on focus. But I couln't find a way to do it.

In FieldContainer.js, I could find how the outlined style defined

So, I try to override by wrap the editor using ThemeProvider and override the theme.palette.primary.main, like this

I manage to achieve it, but I also want to change the borderWidth.

Is there any other way to style on focus/disabled or any other as direct as doing this:

"&& .MuiTiptap-FieldContainer-notchedOutline, && .MuiTiptap-MenuBar-root":  {
       borderColor: "red",
},

Also, when I inspect the element when focus on the editor, the className seems a generated classes, like this

If it is a static class such .MuiTiptap-FieldContainer-focus-notchedOutline, I think I can override it in the sx box.

Update: I manage to achieve it without using ThemeProvider, but I'm not sure if this is the right way to do it.

Is it a proper way?