How to increase the size of CKEditor React component with Material UI react?

I am using CKEditor React Component (https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html) at multiple times in my project. RichTextEditor.js (in folder A)

import React, { Component } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "./RichTextEditor.css";

const RichTextEditor = () => {
  return (
    <div>
      <CKEditor 
        editor={ClassicEditor}
        data="<p>Enter your brand description here...</p>"
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          console.log("Editor is ready to use!", editor);
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>
  );
};

export default RichTextEditor;

I have used this component in folder A where I set the height of editor by creating CSS file and changed the default height as follows:

RichTextEditor.css (in folder A)

.ck-editor__editable {
  min-height: 100px;
}

Now, I want to use the same component in folder A to folder B where height of component is different. But at the same time I want to use philosophy of React to reuse the component. But if I import component from folder A to folder B, I will also need to import the css file in folder A which will be of height 100px. But in folder B, I want different height. otherwise, I need to create different CSS file in folder B which I don't want to do.

The thing is I am using Material UI and I don't know how to edit this in built style properties in CKEditor with makeStyles in Material UI. Can anyone please tell me, how can I reuse the component and set the different heights in different components with Material UI??

Solution

I've just been working on exactly the same thing. And although you can do something like this under the CKEditor component:

onReady={(editor) => {
   editor.ui.view.editable.element.style.minHeight = "500px";
}}

as per: How to set the height of CKEditor 5 (Classic Editor)

You will also need to do that for onFocus and onBlur and what I set in onBlur is overwritten by CKEditor anyway so it shrinks. I guess some ugly delay solution might work there but this is fortunately not needed.

I believe we can use something like this instead:

A) import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    richTextEditor: {
        "& .ck-editor__main > .ck-editor__editable": {
            minHeight: "100px"
        }
    }
}));

And then in the component:

C) const classes = useStyles();

<div className={classes.richTextEditor}>
    <CKEditor .../>
</div>

There might be a better way to deal with that but this one looks clean enough.