React hooks incorrect scope in nested components

[Tybot204]

React Konva: 16.10.1-0
React: 16.10.2

When using hooks inside nested Konva components, the hooks appear to lose the correct scope or context.

For a specific example, I am using some hooks from Material UI.

const MyComponent = () => {
  const theme = useTheme();

  // Prints the correct theme object I have configured in my app
  console.log(theme);

  return (
    <Stage>
      <Layer>
        <NestedComponent />
      </Layer>
    </Stage>
  );
};

const NestedComponent = () => {
  const theme = useTheme();

  // Prints the default theme, ignoring the config I have in the rest of the app
  console.log(theme)

  return <Text text="My Text" x={0} y={0} />;
};

This is not exclusive to Material UI hooks. I run into a similar error when using other libraries. It may be related to this issue.

[lavrton]

react-konva is losing the context information from the tree above. At the current moment, I don't know any ways to automatically pass contexts into nested components. You have to "bridge" them manually.

For more info and a demo see here: #188