Currently we are using `emotion/css` and passing css to className for styling components. We'd like to use `emotion/react` for passing styles so we can use the `css` prop on components for styles and improve class name debugging and server side rendering.

This ticket involves updating our build config to include a babel plugin for emotion/react, so we can start using the `css` and also not have a jsx pragma at the top of files.

Github thread with some more info: https://github.com/mongodb-js/compass/pull/2527#discussion_r733077477

https://emotion.sh/docs/css-prop
https://emotion.sh/docs/typescript#css-prop

Using "jsxImportSource": "@emotion/react" in our compilerOptions in the tsconfig was erroring. I think it might be something that needs react 17 to work nicely without some more intentional configuration https://www.typescriptlang.org/tsconfig#jsxImportSource

If it isn't feasible we can either start using the js pragma or keep using `className` with emotion/css. Using the pragma out of the box was causing an error `RangeError: WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread` when running in the electron renderer in electron-mocha tests so we'll have to investigate that.
^^ this was fixed here: https://github.com/mongodb-js/compass/pull/2641