No styles for office-ui-fabric-react

[bfanger]

Investigate why the styling doesn't work for the stackoverflow demo:

https://stackblitz.com/edit/sveltejs-kit-template-default-prpe6s?file=src/routes/stackoverflow/+page.svelte

[osmanium]

:+1: +1

[bfanger]

Related https://github.com/bfanger/svelte-preprocess-react/issues/8

The styling does work, but not for all components, this is because some of the office-ui-fabric-react components inspect and mutate the child components, and in Svelte you're only able to render a slot as-is, access is restricted by design.

This allows Svelte to guaranty encapsulation, which simplifies reasoning about the code, but this breaks some patterns that React uses, like using children as a function or code like this from <Stack>:

var stackChildren = React.Children.map(props.children, function (child, index) {
  if (!child) {
    return null;
  }
  if (_isStackItem(child)) {
    var defaultItemProps = {
      shrink: !disableShrink,
    };
    return React.cloneElement(child, __assign(__assign({}, defaultItemProps), child.props));
  }
  return child;
});

To work around this:
Write a React component that doesn't accept children (of uses the child as-is) and inside this new component you can use the components in the children inspecting/mutating/calling way React allows.