javascript - react-draft-wysiwyg 正文中如何调整内容样式

Question

我是新手，我已经完成了，draftjs editor但是当我尝试使用代码时，没有显示边框。

这是编辑器的快照：

我的代码：

export default class App extends Component {
  render() {
    return (
      <Container>
        <Modal trigger={<Button>Show Content</Button>}>
          <Modal.Content>
            <Editor />
            <Button>Send</Button>
          </Modal.Content>
        </Modal>
      </Container>
    );
  }
}

这里是整个代码：“ https://codesandbox.io/s/distracted-ritchie-s75re ”

尝试给出边界，但问题是当我写更多的单词时，它会超出边界。任何人都可以在这个查询中帮助我吗？

Answer 1

首先，您正在使用react-draft-wysiwyg

• 参考其文件

---

您可以通过editorStyle的 props 设置编辑器样式

editorStyle：在编辑器周围应用的样式对象

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
...
<Editor editorStyle={{ border: "1px solid" }} />

Answer 2

As you're using an imported editor you have to specify the className used properly. So, inspect the element at which you want to update properties and find the className of the DOM element. Sometimes, there is a chance that native css code might override external one.So, Try to specify manually as,

div.rdw-editor-main{
  border: 1px solid #C0C0C0 ;
}

Add this to your style.css and you can definitely see the border which works perfectly fine. You can also do this,

<Editor editorStyle={{ border: "1px solid #C0C0C0" }} />

Hope it helps!. Happy Coding!!