Как настроить стиль содержимого в теле реакции-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

Поскольку вы используете импортированный редактор, вы должны указать, что имя_класса используется правильно. Итак, проверьте элемент, в котором вы хотите обновить свойства, и найдите className элемента DOM. Иногда есть вероятность, что собственный код css может переопределить внешний. Так, попробуйте указать вручную как,

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

Добавьте это к своему стилю. css, и вы определенно сможете увидеть границу который отлично работает Вы также можете сделать это,

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

Надеюсь, это поможет !. Счастливое кодирование !!

Answer 2

Во-первых, вы используете Reaction-draft-wysiwyg

• со своим документом

---

Вы можете установить стили редактора с помощью editorStyle

editorStyle: объект стиля, примененный вокруг редактора

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