title: How to style DraftJS editor in React
body: <p>I am implementing a web ui with React and the <a href="https://material-ui.com/" rel="nofollow noreferrer">Material UI library</a>.</p>
  
  <p>I need a custom styled DraftJS editor component but none of my tries worked.</p>
  
  <p>Let's imagine I want to have a red color for my hole text block within my editor component.</p>
  
  <p>The Editor Component got child <code>&lt;div class="DraftEditor-root"&gt;</code> which I want to style through my Editor component.</p>
  
  <p>For that I tried the <code>className</code>:</p>
  
  <pre><code>const styles = () =&gt; ({
      myEditorStyle: {
          "&amp; root": {
              color: "red"
           }
      }
  })
  
  
  render() {
  const { classes } = this.props;
  
      return (
          &lt;Editor className={classes.myEditorStyle}/&gt;
      )
  }
  
  export default withStyles(styles)(MaterialTextEditor);
  </code></pre>
  
  <p>and <code>classes</code>:</p>
  
  <pre><code>const styles = {
      myEditorStyle: {
          color: "red"
      }
  }
  
  
  render() {
  const { classes } = this.props;
  
      return (
          &lt;Editor classes={{ root={classes.myEditorStyle} }}
      )
  }
  
  export default withStyles(styles)(MaterialTextEditor);
  </code></pre>
  
  <p>But that does not work. What am I doing wrong?</p>