How do i design the draft-js editor itself? - draftjs

Question

I am trying to learn how to use draftjs, but i can't figure out how to apply css to the editor itself. I read in the documentation that it is possible to design the content blocks, but i am looking for a way to design the editor.

Answer 1

Draft sets a few class names on the editor that you can use. Here's a (non-comprehensive) list:
.DraftEditor-root
.DraftEditor-editorContainer
.public-DraftEditor-content
.public-DraftEditorPlaceholder-root
.public-DraftEditorPlaceholder-inner
.public-DraftStyleDefault-block
Here's a fiddle showing them. And here's the styles used in the fiddle:
.DraftEditor-root,
.DraftEditor-editorContainer,
.public-DraftEditor-content {
padding: 5px;
margin: 5px;
}
.public-DraftEditorPlaceholder-root {
margin-top: 28px;
margin-left: 25px;
}
.public-DraftEditorPlaceholder-inner {
background: rgba(0, 0, 0, .5);
color: white;
}
.DraftEditor-root {
border: 1px solid black;
}
.public-DraftEditor-content {
border: 1px solid blue;
}
.DraftEditor-editorContainer {
border: 1px solid green;
}
.public-DraftStyleDefault-block {
border: 1px solid red;
margin: 5px 0;
}
Draft will also output some more class names depending on text alignment etc. I'd encourage you to inspect the elements in e.g. Chrome DevTools to see what's available.