widgetland

Style injection

Create any app-specific styled components, colors, or widget geometry. Then combine those with the default widgetland styles in your app like this:

combineStyles({}, devAppColors, devAppWidgetGeometry);

Access those styled components as members of the combined styles:

const { AppContent } = getCombinedStyles();

NOTE:

When creating any styled components which access getCombinedStyles(), you must use the "function" form of the styled() call, e.g.

export const StyledComponent = styled.div(() => {
  return {
    // css things here
  };
});

NOT

export const StyledComponent = styled.div({
  // css things here 
});

It seems that the "data" version gets read and stored before the combineStyles() call is processed, whereas the "function" version is called after, and, thus, works.

scrolling note:

For the items to auto-scroll to the middle you MUST give the top-level page div a classname which includes "PageDiv".