Open jimkk159 opened 1 year ago
@jimkk159
.w-md-editor-text-input,
.w-md-editor-text-pre > code,
.w-md-editor-text-pre
{
font-family: Arial,sans-serif !important;
}
Upgrade v3.23.0
.w-md-editor {
--md-editor-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
My idea is that I can just simply add some taliwind css class (here is font-family ) to the
Does it make sense?
Not a tailwind solution, but In nextjs you can assign the font to a variable and then reference it in css
app/layout.tsx
import { Roboto_Mono } from 'next/font/google';
const robotoMono = Roboto_Mono({
weight: ['400', '500', '700'],
subsets: ['latin'],
variable: '--roboto-mono-font'
});
const RootLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<html lang="en">
<body
className={robotoMono.variable}
>
{children}
</body>
</html>
);
}
export default RootLayout;
components/markdown/style.css
.w-md-editor {
--md-editor-font-family: var(--roboto-mono-font)
}
components/markdown/MarkdownEditor.tsx
'use client';
import MDEditor, { MDEditorProps } from '@uiw/react-md-editor';
import rehypeSanitize from 'rehype-sanitize';
import 'components/markdown/style.css';
export const MarkdownEditor: React.FC<MDEditorProps> = props => {
return (
<div data-color-mode="light">
<MDEditor
{...props}
previewOptions={{
rehypePlugins: [[rehypeSanitize]]
}}
/>
</div>
);
};
@jimkk159 you can do smthn like this in your globals.css
if you wanna style w tw classes:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* to overrride the default font size for the md editor */
body .w-md-editor-text-pre > code,
body .w-md-editor-text-input {
@apply !text-base;
}
Was facing issues without adding body to the styles but you can try without it
Hello, I know I can use the class name to change the editor style
I want to use taliwind css to change the default editor font style, However, the added font-family seems like does not work (replace by the default font-family)
replace by
Is there any good solution to deal with this?