为组件创建样式组件但不知道类型答案

【问题标题】：Creating styled-component for component but don't know type为组件创建样式组件但不知道类型
【发布时间】：2021-12-22 16:57:55
【问题描述】：

我正在使用 styled-components 库，并且正在尝试设置组件的样式，但我不知道类型。我尝试了很多，但我一直收到错误Error: Cannot create styled-component for component。提前感谢您的帮助！

export const StyledSupply = styled.text `
  textAlign: "center",
  fontSize: 30,
  fontWeight: "bold",
  color: "var(--accent-text)"
`;

<s.TextTitle style={StyledSupply}>
    {data.totalSupply} / {CONFIG.MAX_SUPPLY}
</s.TextTitle>

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

我建议您查看文档中的示例：https://styled-components.com/docs/basics#getting-started

如果您只是想设置一些文本的样式，您可以尝试将您的代码更改为以下内容：

// Styled Component
export const StyledSupply = styled.span`
  textAlign: center;
  fontSize: 30;
  fontWeight: bold;
  color: var(--accent-text);
`;

// Render
<StyledSupply>
    {data.totalSupply} / {CONFIG.MAX_SUPPLY}
</StyledSupply>

您可能需要将--accent-text 定义为变量并改用它。

此外，您的 CSS 属性可能需要使用官方名称，例如textAlign 可能需要为 text-align 等。

如果s.TextTitle 是一个有效的组件并接受className 作为道具，你可以更进一步，你可以这样做：

// Styled Component
export const StyledTextTitle = styled(s.TextTitle)`
  text-align: center;
  font-size: 30;
  font-weight: bold;
  color: var(--accent-text);
`;

// Render
<StyledTextTitle>
    {data.totalSupply} / {CONFIG.MAX_SUPPLY}
</StyledTextTitle>

文档：https://styled-components.com/docs/basics#styling-any-component

【讨论】：