Draft-js: Draft Editor placeholder color not light gray...

[steviesama]

I'm using the react-toolbox for a lot of controls, and I'm wondering if perhaps it is somehow interfering which the placeholder styling of the Draft Editor placeholder text color.

Here is the text. It is solid black. Also when you go to put the cursor in the box, it appears under the placeholder instead of on top of it and when you type it appears below the placeholder before it switched to where the placeholder is located.

As far as I can tell I've defined it just like the example, the styling is the only thing I can think of off-hand.

Is there a way to override the placeholder style?

[sophiebits]

Make sure you've included the CSS; it includes a style that makes .public-DraftEditorPlaceholder-root gray. You can also add styles to that class manually (and anything with "public" in the name).

[steviesama]

Part of it was Draft.css, but not because I didn't include it. I'm using webpack for one, and if you include the css, it renames all of the class names with the appended identifiers, and considering that draft.js is generating the class names dynamically, they weren't on statically defined elements for it to transform the element classname references.

I inspected it in chrome, and the draft generated classnames are normal but the includes file was mangled; if you use require(./Draft.css) that is. The resolution is to remove that, put the Draft.css in the root directory. That way it wasn't getting mangled by webpack. Noob webpack user here. x(

[howardyclo]

Instead of putting the Draft.css in the root directory ( If your webpack output directory is not in the root directory but the directory generated in runtime, this will not work ) , just simply include cdn <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.min.css"> to your index.html will work.

[steviesama]

@HowardLoTW Yeah, that's what I ended up doing. Thanks.

[baterson]

Another solution is use pointer-events: none for placeholder .
.public-DraftEditorPlaceholder-inner { position: absolute; pointer-events: none; }