如何调整react-draft-wysiwyg body中的内容样式

Question

我是 React 新手，我已经完成 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

参考其document

您可以通过 editorStyle

的属性设置编辑器样式

editorStyle: style object applied around the editor

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

Answer 2

当您使用导入的编辑器时，您必须指定正确使用的类名。因此，检查要更新属性的元素并找到 DOM 元素的类名。有时，本机 css 代码可能会覆盖外部 one.So，请尝试手动指定为

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

将此添加到您的 style.css 中，您肯定可以看到效果非常好的边框。你也可以这样做，

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

希望对您有所帮助！ 编码愉快！！

如何调整react-draft-wysiwyg body中的内容样式

How to adjust the content style in the body of react-draft-wysiwyg

html

javascript

reactjs

react-draft-wysiwyg