4

I am implementing a web ui with React and the Material UI library.

I need a custom styled DraftJS editor component but none of my tries worked.

Let's imagine I want to have a red color for my hole text block within my editor component.

The Editor Component got child <div class="DraftEditor-root"> which I want to style through my Editor component.

For that I tried the className:

const styles = () => ({
    myEditorStyle: {
        "& root": {
            color: "red"
         }
    }
})


render() {
const { classes } = this.props;

    return (
        <Editor className={classes.myEditorStyle}/>
    )
}

export default withStyles(styles)(MaterialTextEditor);

and classes:

const styles = {
    myEditorStyle: {
        color: "red"
    }
}


render() {
const { classes } = this.props;

    return (
        <Editor classes={{ root={classes.myEditorStyle} }}
    )
}

export default withStyles(styles)(MaterialTextEditor);

But that does not work. What am I doing wrong?

0 Answers0