在样式组件UI库上使用ThemeProvider

Question

我正在创建一个使用样式组件的UI库，并且我有这样一个组件

const Title = styled('div')`
  color: ${({ theme }) => theme.sender.color};
  font-size: 0.9rem;
  padding: 0.5rem 0.3rem 0.5rem;
  span {
    color: ${({ theme }) => theme.sender.color};
    background: ${({ theme }) => theme.sender.botBackground};
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    text-transform: uppercase;
  }
`;

我需要在另一个项目中实现，从我的UI库导入组件。我已经完成了构建库的所有过程，并将其设置为使用rollup和babel的库。

<ThemeProvider theme={customTheme}>
    <Title />
</ThemeProvider>

然而，当我试图在项目中使用ThemeProvider时，主题支柱并没有被传递下来，而且我收到了一个错误，因为它试图从未定义的发件人处获取

知道为什么会发生这种事吗？

Answer 1

一个更干净的实现可能如下所示：

const Title = styled('div')`
  color: ${ props => props.sender.color};
`;

<ThemeProvider theme={defaultMessageBubbleTheme}>
    <Title />
</ThemeProvider>