reactjs - MUI is causing issues with markdown renderer - Stack Overflow

admin管理员组

文章数量:1289986

Edit: As I continue to dig deeper and just try whatever I can, the issue really seems to just be not being able to remove the inherit aspect of the base layer css created by MUI (or at least I think it is based on what I can see). So the fight seems to mostly be just removing the styles out of this particular component and it's children

I'm working with a markdown renderer someone else had created, everything seems to be as it should, but unfortunately MUI is messing up the markdown rendering. The simplest example would be for a header, my main h1 has styles as(when inspecting the element):

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

This seems to be messing up the headers and leaves them completely unidentifiable compared to a standard

. I can't seem to pass a style into the render component from react-markdown and applying a style to a div parent changing to initial instead of inherit doesn't seem to do anything either. I'm not quite sure how to force an override of these css elements so that everything renders properly (this also happens with both ordered and unordered lists as well). Here is the component to render:

import Markdown from 'react-markdown'
// import remarkBreaks from 'remark-breaks'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { nord, prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
import remarkGfm from 'remark-gfm'
import {
    Paper,
    Table,
    TableBody,
    TableContainer,
    TableRow,
    TableHead,
    TableCell,
    Typography,
} from "@mui/material";
import { useDarkMode } from "@/context/DarkModeContext"




const CustomTableCell = ({ children }: any) => {
    return <TableCell sx={{ maxWidth: "100%", wordBreak: "break-word" }}>{children}</TableCell>
}

const TableComponent = ({ children }: any) => (
    <TableContainer component={Paper} sx={{ mt: 2 }}>
        <Table>{children}</Table>
    </TableContainer>
)
const TableBodyComponent = ({ children }: any) => (<TableBody>{children}</TableBody>)
const TableHeadComponent = ({ children }: any) => (<TableHead>{children}</TableHead>)
const TableRowComponent = ({ children }: any) => (<TableRow>{children}</TableRow>)
const TableDataComponent = ({ children }: any) => <CustomTableCell>{children}</CustomTableCell>
const TableHeaderComponent = ({ children }: any) => <TableCell component="th"><Typography fontWeight='bold'>{children}</Typography></TableCell>

const CodeComponent = (props: any) => {
    const { darkMode } = useDarkMode()

    const { children, className, node, ...rest } = props
    const match = /language-(\w+)/.exec(className || '')

    return match ? (
        <SyntaxHighlighter
            {...rest}
            lineProps={{ style: { wordBreak: 'break-all', whiteSpace: 'pre-wrap' } }}
            wrapLines={true}
            PreTag="div"
            style={darkMode ? nord : prism}
            language={match[1]}
        >
            {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
    ) : (
        <code {...rest} className={className}>
            {children}
        </code>
    )
}

export default function MarkdownRenderer({ children }: Readonly<{ children: any }>) {
    //remarkPlugins={[remarkBreaks, remarkGfm]}
    return (
        <div style={{fontWeight: "initial !important", fontSize: "initial !important"}}>
        <Markdown
            // style={{fontWeight: "initial", fontSize: "initial"}}
            remarkPlugins={[remarkGfm]}
            components={{
                // Tables
                table: TableComponent,
                tbody: TableBodyComponent,
                thead: TableHeadComponent,
                tr: TableRowComponent,
                td: TableDataComponent,
                th: TableHeaderComponent,
                code: CodeComponent
            }}
        >
            {children}
        </Markdown>
        </div>
    )
}

Any assistance figuring this out would be great, thanks!

本文标签： reactjsMUI is causing issues with markdown rendererStack Overflow