<motion.div> breaks styled jsx

Describe the bug With styled-jsx a <style jsx>{…}</style> tag is added right before the closing element tag in a component. Adding Motion to that component breaks the styled-jsx and does not style the component.

To Reproduce Check out this sandbox showing the issue: https://codesandbox.io/s/hello-world-ec8og

Expected behavior Its expected that the styles would be applied to a motion element just like it would if it wasn’t a motion element.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 75

[danilockthar]

I think the corrected version its not the best way to do it. Hope this get fixed in some advanced version of framer motion.

[rudral]

Got the same issue today… Thanks for the solution @krall12 .

Here is my example of using more than one classNames in a component:

modal.styles.js

import css from 'styled-jsx/css'

export default css.resolve`
    .modal-backdrop {
        ...
    }
    .modal-content {
        ...
    }
`

modal.js

import styledJsx from './modal.styles'
import { motion } from 'framer-motion'

const Modal = ({children, ...otherStuff}) => {
        <motion.div className={`${styledJsx.className} modal-backdrop`}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
        >
            <motion.div className={`${styledJsx.className} modal-content`}
                initial={{ y: '-100vh' }}
                animate={{ y: 0 }}
            >
                {children}
            </motion.div>
            {styledJsx.styles}
        </motion.div>
}

export default Modal