React-draft-wysiwyg: Override styles from public-DraftStyleDefault-block

[tjkind]

With my editor I have found that there is a bit of excess white space at the top that is caused by the margin being set to 1 em in public-DraftStyleDefault-block.

I have several times mistaken it for an extra new line and don't want my users to make the same mistake. How do I override the default style? My best guess was that I could do it through blockStyleFn somehow but I can't get it to work.

[endiliey]

you could define your own className to override it ..

wrapperClassName="your-wrapper-class"
editorClassName="your-editor-class"
toolbarClassName="your-toolbar-class"

[tjkind]

I am already doing that. But it doesn't seem that giving 0 margin to any of these elements makes the extra space go away.

[endiliey]

Try using !important in css

[jpuri]

Also @tjkind you can override the default css styles added by DraftJS. For instance public-DraftStyleDefault-block class in this case.

[rstiyer]

Also @tjkind you can override the default css styles added by DraftJS. For instance public-DraftStyleDefault-block class in this case.

@jpuri: could you give an example of how to do this? I am having the same problem (using ES6).

Update: I was able to solve this with the following changes:

styles.css:

.public-DraftStyleDefault-block > div {
    margin: 0px;
}

index.js:

import styles from './styles.css';

.
.
.

customBlockStyleFn = (contentBlock) => {
    return styles['public-DraftStyleDefault-block'];
}

.
.
.

render() {
    <Editor blockStyleFn={this.customBlockStyleFn} ... />
}

[jpuri]

You need to just declare this in css to override the default like

.public-DraftStyleDefault-block > div {
    margin: 0px !important;
}

[dariavv]

Only this worked in my case
index.css:

.public-DraftEditor-content .public-DraftStyleDefault-block {
  margin: 0;
  padding: 15px 20px;
}