From a51aa23f90ce777c92988f5b7af13f62121c5056 Mon Sep 17 00:00:00 2001 From: Dok6n Date: Thu, 2 Jun 2022 20:29:05 +0900 Subject: [PATCH] docs: fix rendering order of Styling docs --- docs/concepts/styling.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/concepts/styling.md b/docs/concepts/styling.md index cbb4ffe7bb..ff6b05435f 100644 --- a/docs/concepts/styling.md +++ b/docs/concepts/styling.md @@ -7,6 +7,8 @@ title: Styling Remirror requires styles for the editor to function correctly across different browsers. These styles can be added in the following ways: +> In order to use the `styled-components` or `emotion` variants you will need to also install `@remirror/styles`. + With plain css make sure to wrap your editor with the class `.remirror-theme`. This adds the CSS variables with their default values to the dom, for consumption by any editors within this area. Then import the styles from the `remirror/styles` endpoint as shown below. @@ -29,11 +31,11 @@ import { MyEditor } from './my-editor'; // Wrap your editor with the component. const App = () => { return ( - - + + - - + + ); }; ``` @@ -50,11 +52,11 @@ import { MyEditor } from './my-editor'; // Wrap your editor with the component. const App = () => { return ( - - + + - - + + ); }; ``` @@ -70,5 +72,3 @@ const wrapperElement = document.createElement('div'); wrapperElement.classList.add(THEME); // Add the css variables to the dom. addStylesToElement(wrapperElement, allStyles); ``` - -In order to use the `styled-components` or `emotion` variants you will need to also install `@remirror/styles`.