How to get TipTap working with NextJS. #2786
Unanswered
mattiastofte
asked this question in
Questions & Help
Replies: 3 comments 1 reply
-
I got this working with the following: import styles from './styles.module.scss'
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
export default () => {
const editor = useEditor({ extensions: [ StarterKit ]})
return (
<div className={styles.editor}>
<EditorContent editor={editor} />
</div>
)
} with /* Use [class*=...] for partial class name match */
.editor [class*=ProseMirror] {
border: 5px solid #000;
& > * + * {
margin-top: 0.75em;
}
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
For this you can just use Global Styles instead of CSS modules. These will not be prefixed with anything. That's how I did it. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
It's been quite hard to implement TipTap into my NextJS react eco-system. I've made an Editor component that follows the installation instructions under NextJS (on the official website). The only problem is that I style my components with a .module.css file as recommended by NextJS documentation. This is always imported as styles, in my case i import my styling the following way
import styles from "./Editor.module.css";
When modules are imported you always prefix your classname like so:className={styles.example}
. The problem with TipTap is that is uses .ProseMirror class as className and I don't know how I can modify this class when my styling is imported as a styles module. Any solutions?Beta Was this translation helpful? Give feedback.
All reactions