Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: fix rendering order of Styling docs #1680

Merged
merged 1 commit into from Jun 9, 2022
Merged

docs: fix rendering order of Styling docs #1680

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/concepts/styling.md
View file
Open in desktop
Expand Up @@ -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.
Expand All @@ -29,11 +31,11 @@ import { MyEditor } from './my-editor';
// Wrap your editor with the component.
const App = () => {
return (
<ThemeProvider>
<AllStyledComponent>
<AllStyledComponent>
<ThemeProvider>
<MyEditor />
</AllStyledComponent>
</ThemeProvider>
</ThemeProvider>
</AllStyledComponent>
);
};
```
Expand All @@ -50,11 +52,11 @@ import { MyEditor } from './my-editor';
// Wrap your editor with the component.
const App = () => {
return (
<ThemeProvider>
<AllStyledComponent>
<AllStyledComponent>
<ThemeProvider>
<MyEditor />
</AllStyledComponent>
</ThemeProvider>
</ThemeProvider>
</AllStyledComponent>
);
};
```
Expand All @@ -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`.