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

user_12908355 0
Viewed 5676

I'm new to react, I have gone through draftjs editor but when I try to use the code, the border is not getting displayed.

Here is a snapshot of the editor:

border of the body

My Code:

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>
    );
  }
}

Here the whole code: "https://codesandbox.io/s/distracted-ritchie-s75re"

Tried giving border but the problem is when i write more words, it is coming down beyond the border. Can anyone help me in this query?

react-draft-wysiwyg reactjs html javascript
2 Answers

First, you are using react-draft-wysiwyg

You can set the editor styles via the props of 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" }} />

enter image description here

user_118722460

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!!

enter image description here

user_95114300
Related