Overriding the FieldContainer styling

[isaacoviedo]

Hello 👋

I'm trying to override the FieldContainer border styles applied when the component is focused - specifically these styles here. Can someone help suggest on how to go about doing this? I've tried using the RichTextFieldProps.classes prop on the RichTextEditor component but it doesn't seem to be doing the trick.

Currently my theme is making the border orange on focus which I'd like to change to black:

Current effort:

import React, { useRef } from "react";
import { LinkBubbleMenu, RichTextEditor, RichTextEditorRef, TableBubbleMenu } from "mui-tiptap";
import InputLabel from "@mui/material/InputLabel";
import Box from "@mui/material/Box";
import { makeStyles } from "@mui/styles";
import EditorMenuControls from "./EditorMenuControls";
import useExtensions from "./useExtensions";
import "./editor.css";

const useStyles = makeStyles({
  root: {
    "&.focused .notchedOutline": {
      borderColor: "black",
      borderWidth: 2,
    },
  },
});

const Editor = function ({
  label,
  required = false,
  error = false,
  value,
  onChange,
}: {
  label: string;
  required: boolean;
  error: boolean;
  value: string;
  // eslint-disable-next-line no-unused-vars
  onChange: (content: string) => void;
}) {
  const extensions = useExtensions({
    placeholder: "Add your own content here...",
  });

  const rteRef = useRef<RichTextEditorRef>(null);

  const styles = useStyles();

  return (
    <Box>
      <InputLabel required={required} error={error}>
        {label}
      </InputLabel>
      <RichTextEditor
        ref={rteRef}
        onUpdate={(props) => {
          onChange(props.editor.getHTML());
        }}
        extensions={extensions}
        content={value}
        renderControls={() => <EditorMenuControls />}
        RichTextFieldProps={{
          variant: "outlined",
          classes: {
            root: styles.root,
          },
        }}
      >
        {() => (
          <>
            <LinkBubbleMenu />
            <TableBubbleMenu />
          </>
        )}
      </RichTextEditor>
    </Box>
  );
};

export default Editor;

[mortmoe]

Struggling a bit with the same issue. Would it be a solution to add a color attribute to the RichTextEditor like a normal mui text-field? (so we can choose ie. "secondary")

[mortmoe]

A workaround I use for now is to just change the primary mui theme color for my component:

    const customTheme = createTheme({
        ...theme,
        palette: {
            ...theme.palette,
            primary: {
                main: theme.palette.secondary.main // or whatever color you want for the border
            }
        },
    })

    return (
        <ThemeProvider theme={customTheme}>
          <MyEditorComponent/>
        </ThemeProvider>
   )

Notice that this also changes the color of quite a few buttons around town... which is nice in my use-case but might not fit others.