在样式化组件 UI 库上使用 ThemeProvider答案

【问题标题】：Using ThemeProvider on Styled-Components UI Library在样式化组件 UI 库上使用 ThemeProvider
【发布时间】：2021-12-07 10:46:01
【问题描述】：

我正在创建一个使用 Styled-components 的 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 时，theme 道具没有被传递，我收到一个错误，因为它正在尝试获取 sender来自未定义

你知道为什么会这样吗？

【问题讨论】：

标签： reactjs babeljs styled-components rollup

【解决方案1】：

更简洁的实现可能如下所示：

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

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

【讨论】：