Reactjs 如何使用Material UI React增加CKEditor React组件的大小？

我在项目中多次使用CKEditor React组件（）。 RichTextEditor.js（在文件夹A中）

现在，我想使用文件夹A到文件夹B中的相同组件，其中组件的高度不同。但同时我想使用React的理念来重用组件。但如果我将组件从文件夹A导入文件夹B，我还需要导入文件夹A中的css文件，该文件的高度为100px。但在文件夹B中，我想要不同的高度。否则，我需要在文件夹B中创建不同的CSS文件，我不想这样做

---

问题是我正在使用材质UI，我不知道如何使用材质UI中的makeStyles在CKEditor中编辑此内置样式属性。有谁能告诉我，我如何使用Material UI重用组件并在不同组件中设置不同的高度？？？

我刚刚做了完全相同的事情。尽管您可以在CKEditor组件下执行类似操作：

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

根据：

对于onFocus和onBlur，您也需要这样做，我在onBlur中设置的内容无论如何都会被CKEditor覆盖，所以它会缩小。我想一些丑陋的延迟解决方案可能会在那里奏效，但幸运的是，这是不需要的

我相信我们可以用这样的方式来代替：

A）

从'@materialui/core/styles'导入{makeStyles}

（B）

然后在组件中：

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

C） 
const classes=useStyles（）

（D）



也许有更好的方法来解决这个问题，但这个看起来足够干净了

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

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

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