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

Question

我正在使用 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>

Answer 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 作为 prop，您可以更进一步，您可以这样做：

// 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

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

Creating styled-component for component but don't know type

javascript

reactjs

styled-components