how can I wrap code blocks

[lyin-vir]

Hi, I ran into an issue when rendering markdown with long code blocks, the entire jsx would overflow the parent component:

If I use the forceInline: true option, I get the desired wrapping effect but lost the code block styling:

I also tried overriding the pre tag styles like this:

options={{
    overrides: {
        pre: {
            props: {
                style: {
                    'white-space':
                        'pre-wrap',
                },
            },
        },
    },
}}

But it seems that the override style is not merged with the default style, thus I lost the other unspecified styles for pre, resulting similar behavior as the previous screenshot:

I also tried adding overflow: auto on the parent component so that I can at least scroll to the right to see the hidden part. But it's still not ideal because all other text will also overflow instead of wrap to the parent width, which make the content difficult to read:

Does anyone have any suggestions? Thanks in advance!

[ebdavison]

A fix for this would be great as we rely on this for our work code and auto-wrap is critical for lines over, say, 1000 characters.