score:4

Accepted answer

In TestWrapper you are cloning the Test component and applying your style props to it, which are not being passed down to the element that it's cloning itself. Just returning a cloned element doesn't create a referential equality where doing something to the component will affect the element it is cloning. You would need to give a style prop to Test and pass it down to the element being cloned:

const Test: React.FC<{
  style?: React.CSSProperties;
  element: React.ReactElement;
}> = ({ element, style }) => {
  return React.cloneElement(element, {
    style: { ...element.props.style, ...style, color: "red" }
  });
};

I made a fork here. Hopefully this helps!


Related Query

More Query from same tag