I'm using the styled-components library, and am trying to style a component, but I don't know the type. I've tried a bunch but I keep getting an error Error: Cannot create styled-component for component. Thanks in advance for any help!
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>
I suggest you look at examples from the documentation: https://styled-components.com/docs/basics#getting-started
If you just want to style some text, you could try changing your code to something like this:
// 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>
You might need to define --accent-text as a variable and use it instead.
Additionally, your CSS properties may need to be use the official names, e.g. textAlign might need to be text-align, etc.
You can this a step further if s.TextTitle is a valid component and accepts className as a prop, you can do this:
// 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>
Docs: https://styled-components.com/docs/basics#styling-any-component