Not compatible with framer-motion components

[kspc1000]

Problem

When using a framer-motion component such as motion.button, the output html element does not have the data-v-hash attribute.
Thus, the styles don't even get applied at all even after importing the stylesheet e.g. import "./button.scss"

Expected behaviour

Ideally it should have the data-v-hash attribute so that the styles get applied and are scoped only to that component as intended

Steps to reproduce

1. Follow the steps in this repository's instructions to use react-scoped-css.
2. Install framer-motion
3. Create a framer-motion component
4. Try applying a scoped file to that framer-motion component e.g. `import "./button.scss". In the dev tools you can see that the stylesheet is there but the styles are not applied as the output html element does not have the hash that the styles selectors do.

Comments

I believe this is similar to issue #52 and that this package simply does not work for 3rd party library components, it only works for normal react components.

[northwang-lucky]

It seems that I have encountered the same problem. It will work normally only I use like this:

import { Layout } from 'xxx';
const { Header } = Layout;
function TopHeader() {
  return (
    <Header className="top-header">
      <div>Header</div>
    </Header>
  );
}

[bunnyxt]

It seems that I have encountered the same problem. It will work normally only I use like this:

import { Layout } from 'xxx';
const { Header } = Layout;
function TopHeader() {
  return (
    <Header className="top-header">
      <div>Header</div>
    </Header>
  );
}

I have encountered the same problem as well, using Ant Design. Thanks to your solution!

import { Layout } from 'antd';

const MyComponent = () => {
  return (
    <Layout.Header className="header">  // ❌
    </Layout.Header>
  );
}

import { Layout } from 'antd';

const { Header } = Layout;  // 💡 here, get Header from Layout

const MyComponent = () => {
  return (
    <Header className="header">  // ✔
    </Header>
  );
}

However, when I set className on Modal, it still not works. I'm still figuring out how to solve it.