UI theming
The base editor has a very simple UI and its styles are relatively straightforward. To make sure everything works, use a CSS reset, like Normalize.css.
CSS theming
To tweak the editor UI, Draftail uses old-fashioned stable, namespaced class names that you are free to add more styles to. For example, the toolbar uses .Draftail-Toolbar.
Inspect the editor and target class names starting with Draftail-, or if unavailable Draft / public-Draft from Draft.js.
Sass theming
Draftail also makes its Sass stylesheets available for extension:
// Increase the default editor z-index.
$draftail-editor-z-index: 100;
// Import all of the styles in your build.
@import "draftail/lib/index";
You can get very far by adding new default values for the variables in _constants.scss. For example,
// Remove the editor's border and make the toolbar free-floating
$draftail-editor-border: 0;
$draftail-editor-padding: 0;
$draftail-toolbar-radius: 5px;
@import "draftail/lib/index";
Draftail also has a draftail-richtext-styles mixin you can use to make sure styles on rich text content don't leak to other parts of your site:
@include draftail-richtext-styles() {
// Style Draft.js blockquotes.
blockquote {
padding: 0 0 0 20px;
margin-left: 0;
font-style: italic;
border-left: 1px solid #e5e5e5;
}
}
Alternatively, only import the constants to reuse them elsewhere in your project.
@import "draftail/lib/api/constants";