styled-components make the event stream miss

[cieldon32]

code is here
https://codesandbox.io/s/nostalgic-sun-1kxy8m?file=/src/Item.tsx:794-884

[voliva]

import styled from "styled-components";

const Component = (Dom) => styled(Dom)`
  display: ${(attrs) => (attrs.hide ? "none" : "block")};
  height: ${({ height }) => height};
  background: ${({ background }) => background};
`;


export const Item = ({ children, name, ...props }: any) => {
  const [state, setState] = useState({});
  const store = useStore();

  useEffect(() => {
    const source$ = name ? store[name] : null;
    if (source$) {
      const sub = source$.subscribe((res: any) => {
        console.log(name, res);
        setState(res);
      });
      return () => {
        sub.unsubscribe();
      };
    }
  }, [store[name]]);

  const Com = (props: any): React.FC<any> => (
    <children.type {...children.props} {...props} />
  );

  const Demo = Component(Com);

  return (
    // <div data-name={name}>
    <Demo {...state} />
    // </div>
  );

  // return <children.type {...children.props} {...state} />;
};

Your code doesn't work because of this thing. You can't create components and render them inside another component. If you look at the console, Mui is warning you that you're also calling styled inside a component which won't work.

What does this have to do with rxjs?