Draftjs styling in React

css reactjs draftjs
Robin picture Robin · Jul 10, 2016 · Viewed 10.2k times · Source

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.

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

Answer

Sergey picture Sergey · Aug 18, 2016

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';
...

Related questions

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More