Repository: storybook
Issue: MDX styling issue 
Labels: bug,has workaround,theming,mdx

**Describe the bug**
MDX parsing removes default styling, while enables styles when I wrap element in text.

**To Reproduce**
Steps to reproduce the behaviour:
I have set up a simple storybook with the following files/configs:

```sh
.
├── main.js
├── markdown.tsx
└── pages
   ├── welcome.md
   └── welcome.stories.mdx

```

main.js
```js
module.exports = {
    "stories": [
        "../src/**/*.stories.@(js|jsx|ts|tsx)",
        "./pages/*.stories.mdx"
    ],
    "addons": [
        {
            name: '@storybook/preset-typescript',
            options: {
                tsLoaderOptions: {
                    transpileOnly: true,
                },
            },
        },
        {
            name: '@storybook/addon-docs',
            options: { configureJSX: true },
        },
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/preset-create-react-app",
    ],
}
```

welcome.stories.mdx
```jsx
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import welcome from './welcome.md';
import Markdown2JSX from "../markdown"

<Meta title="Intro/Welcome"  />

<Markdown2JSX content={welcome}/>

```

welcome.md
```
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template.

## Available Scripts

In the project directory, you can run: blah blah
```

markdown.tsx
```jsx 
import * as React from "react";
import MarkdownToJSX from "markdown-to-jsx";

interface MarkdownProps {
  content: string;
}

export default class Markdown extends React.Component<MarkdownProps> {
  render() {
    console.log(this.props);
    // Example taken from Workday's public repo:
    // https://github.com/Workday/canvas-kit/blob/master/utils/storybook/Markdown.tsx
    return (
      <div className="markdown-body">
        <MarkdownToJSX>{this.props.content}</MarkdownToJSX>
      </div>
    );
  }
}
```

**Expected behavior**
The excepted behaviour would be to render the whole MDX with consistent styles. As is turns out, the imported markdown `welcome.md` is rendered with another font.

![image](https://user-images.githubusercontent.com/12672541/109402594-50d23080-7957-11eb-8cd1-900dca40f628.png)

The weird part, is that then I modify the MDX file and add a non-breaking space in the file before the Markdown transform component the styling works fine.

modified-welcome.mdx
```jsx
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import welcome from './welcome.md';
import Markdown2JSX from "../markdown"

<Meta title="Intro/Welcome"  />

&nbsp;	<Markdown2JSX content={welcome}/>
```

![image](https://user-images.githubusercontent.com/12672541/109402639-a9a1c900-7957-11eb-892b-4ae67b0fc20e.png)


**System**

```yaml
Environment Info:
  System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
  Binaries:
    Node: 15.10.0 - ~/.nvm/versions/node/v15.10.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.5.3 - ~/.nvm/versions/node/v15.10.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 14.0.3
```