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

Posted 2023-03-15

【中文标题】在样式化组件 UI 库上使用 ThemeProvider

【英文标题】：Using ThemeProvider on Styled-Components UI Library

【发布时间】：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来自未定义

你知道为什么会这样吗？

【参考方案1】：

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

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

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