Errors with `<style>` tag

[jpzwarte]

This fails inside storybook (MDX) and in the mdxjs.com playground:

<style>.foo { color: red; }</style>

Playground errors: SyntaxError: No-Inline evaluations must call 'render'.

and

SyntaxError: unknown: Unexpected token, expected "}" (7:19)
   5 |       {...props}
   6 |       components={components}>
>  7 | <style>.foo { color: red; }</style>
     |                    ^
   8 |     </MDXLayout>
   9 |   )
  10 | };

Is there a way you can get this to work?

I have an optimized <svg> that relies on a <style> tag. So I cannot use inline styles here.

[ChristianMurphy]

MDX is markdown with JSX. JSX doesn't support format of styling, for example plugging the same JSX into babel produces the same error https://babeljs.io/repl/#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=DwZwLgngNgpgfAOgGYHsUAIDe6DGKooBOAXOoTACYDc6AvsAPTjTxA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.14.6&externalPlugins=

For an introduction to methods which can be used, see JSX/Reacts introduction to styling https://reactjs.org/docs/faq-styling.html

[ChristianMurphy]

Some next steps:

1. SVG can be converted to JSX, consider using a tool like https://react-svgr.com to do so
2. If you have follow up question, we're happy to help, please direct them to https://github.com/mdx-js/mdx/discussions (as noted in the issue template)