Motion: <motion.div> breaks styled jsx

[krall12]

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

[mattgperry]

I'm not familiar with styled-jsx but it looks like this instruction would apply here? https://github.com/zeit/styled-jsx#styling-third-parties--child-components-from-the-parent

[krall12]

Hey @InventingWithMonster, thanks for the quick response. I've figured out how to get it working with styled-jsx and I've updated the original codesandbox with a working version for anyone that comes across this same issue.

You have to use styled-jsx's css.resolve method and pull the className and styles off of it.

function getStyles() {
  return css.resolve`
    button { background: #bada55; }
  `
}

export default function() {
  const { className, styles } = getStyles(); 

  return (
    <motion.button className={className} whileTap={{ scale: 0.9 }}>
      Click Here
      {styles}
    </motion.button>
  );
}

[mattgperry]

Awesome thanks for investigating!

[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.

[lawderp]

agreed, this strikes me as unexpected/messy. but alas, I think my real problem is using styled-jsx in the first place 😆

[mcabrams]

I spun up a quick next.js environment to test framer motion - and this was the first issue I ran into. Could be a common path for others being introduced to framer motion, so seems worth thinking about improving.

[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

[kud]

related: https://github.com/vercel/vercel/discussions/5500