[@mantine/core] TypographyStylesProvider: Fix code tag styles when it…

… is nested within pre tag (#2219)

src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.story.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TypographyStylesProvider } from './TypographyStylesProvider';
+
+export default { title: 'TypographyStylesProvider' };
+
+const content = `
+<pre><code>{
+  "firstName": "John",
+  "lastName": "Smith",
+  "age": 25
+}</code></pre>
+`;
+
+export function CodeBlock() {
+  return (
+    <div style={{ padding: 40 }}>
+      <TypographyStylesProvider>
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+      </TypographyStylesProvider>
+    </div>
+  );
+}

src/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.ts

@@ -87,6 +87,14 @@ export default createStyles((theme) => {
         fontSize: theme.fontSizes.sm,
         borderRadius: theme.radius.sm,
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+
+        '& code': {
+          backgroundColor: 'transparent',
+          padding: 0,
+          borderRadius: 0,
+          color: 'inherit',
+          border: 0,
+        },
       },
 
       '& code': {