React中如何让Styled Components的ThemeProvider作用于Portal组件？

我配置了Styled Components的ThemeProvider，但创建的Portal内组件无法访问该Provider。

我的Provider配置 #

<ConfigProvider>
  <ThemeProvider theme={myTheme}> //<-- provider from styled-components
    <App />
  </ThemeProvider>
</ConfigProvider>

Portal创建代码 #

export const SetSelector = ()=>{
  const OptionsModal = useMemo(() => {
      return (
          <Wrapper $theme={configState.theme}>
            <Modal $theme={configState.theme}>
              // more components here, like buttons
            </Modal>
          </Wrapper>
      );
    }, [ . . . ]);
  
    return (
      <ListSelectorWrapper>
        {displayOptions && createPortal(OptionsModal, document.body)}
      </ListSelectorWrapper>
    );
  };
}

错误信息 #

模态框内的组件无法访问Styled Components的ThemeProvider，出现错误：Uncaught TypeError: Cannot read properties of undefined (reading '300')，该错误来自我的Button组件：

background: ${props=>props.$variant==="flat"?"transparent":props.$theme==="dark"?props.theme.gray[300]:props.theme.gray[600]};

尝试过的方法 #

我尝试用Provider包裹portal，但依旧报错：

const OptionsModal = useMemo(() => {
    return (
      <ThemeProvider theme={myTheme}>
        <WrapperOverlay $theme={configState.theme}>
          <Modal $theme={configState.theme}>
             // more components here, like buttons
          </Modal>
        </WrapperOverlay>
      </ThemeProvider>
    );
  }, [...]);

解决办法 #

系个人失误，访问主题值的路径有误，正确写法应为props.theme.colors.gray[300]，而非props.theme.gray[300]

内容的提问来源于stack exchange，提问作者elVengador