Draftjs styling in React

Question

I want to use draft.js in my project. It has its own css which I also need to import. In the documentation it is said:

This CSS should be included when rendering the editor, as these styles set defaults for text alignment, spacing, and other important features.

How do I include the Draft.css while rendering the component? Do I include it in my main index.html?
Also how to give an id to the editor so that I can style it (eg. border, padding, min-height, etc)

Draft.css should be included in every page that has the DraftJS component. For styling the DraftJS in multiple places, inline styles can be used. If generic functionality is required, create a wrapper component on top of Editor and EditorState. — vijayst, Jul 10 '16 at 17:15
@Vijay How can you do inline styles? I tried `` to no avail. — dayuloli, Jul 11 '16 at 08:08
I was hoping that the customStyleMap property would do it. documentation of that property is different from what I thought. I have upvoted your question. — vijayst, Jul 11 '16 at 08:18
Note that certain build setups (such as Create React App) automatically include the default css of the imported modules, so there is nothing to do in these cases. — Tarnay Kálmán, Feb 13 '18 at 23:38

score 29 · Answer 1 · answered Aug 18 '16 at 15:39

29

Depending on your setup, you should be able to include or import the Draft.css in the index.js file.

...
import 'draft-js/dist/Draft.css';
...

answered Aug 18 '16 at 15:39

Sergey

score 4 · Answer 2 · answered Jul 13 '16 at 16:04

draftjs produces Draft.css in the build and is available within the node_modules. Use the css for default styling.

For background color of the editor, the following CSS class should be modified:

.DraftEditor-editorContainer {
  background-color:#fff;
  border-left:.1px solid transparent;
  position:relative;
  z-index:1
}

2 Answers2