can it notify the child component that is hovered if wrapped with styled component?

[OnlyRefat]

• question

Hi,

Thanks for the good work. I am using it on my projects heavily.

Does it support https://github.com/styled-components/styled-components ? I am using the following code

import React from 'react';
import ReactHoverObserver from 'react-hover-observer';
import { FieldBlock, FieldBoundaries } from './block.style';

export default ({ children, admin }) => (
  <FieldBlock className="hello">
    <ReactHoverObserver>
      {admin && <div className="drag-me">Drag Here</div>}
      <div>
        <FieldBoundaries>{children}</FieldBoundaries>
      </div>
    </ReactHoverObserver>
  </FieldBlock>
);

where the block.style.js is

import styled from 'styled-components';
import { palette } from 'styled-theme';

const FieldBlock = styled.div`
  ${'' /* background-color: #f4f4f5; */}
  background-color: ${palette('grey', 0)}; 
  padding: 30px;
`;

const FieldBoundaries = styled.div`
  background-color: #ffffff;
  border: 2px dashed #e9ebf3;
  padding: 30px 20px;
  border-radius: 3px;
`;

export { FieldBlock, FieldBoundaries };

if I remove the styled component and put a div aroung children property it does not work.

import React from 'react';
import ReactHoverObserver from 'react-hover-observer';
import { FieldBlock, FieldBoundaries } from './block.style';

export default ({ children, admin }) => (
  <FieldBlock className="hello">
    <ReactHoverObserver>
      {admin && <div className="drag-me">Drag Here</div>}
       <div> {children}</div>
    </ReactHoverObserver>
  </FieldBlock>
);

It works when I remove the styled component wrapper around children property.

import React from 'react';
import ReactHoverObserver from 'react-hover-observer';
import { FieldBlock, FieldBoundaries } from './block.style';

export default ({ children, admin }) => (
  <FieldBlock className="hello">
    <ReactHoverObserver>
      {admin && <div className="drag-me">Drag Here</div>}
        {children}
    </ReactHoverObserver>
  </FieldBlock>
);

Am I missing something or it does not have support for styled component?