React styled-components not applying styles to components

Question

I'm trying to get used to styled-components in react. But it doesn't seem to work all the time. I'm currently using it in a project. While it works perfectly in some components, it doesn't apply the styles in some others. Here's my code where it doesn't work. I created the styles-components in a separate file (card.js) and folder (styles) and exported them like so;

import styled from 'styled-components/macro';

export const Title = styled.p`
  font-size: 24px;
  color: #e5e5e5;
  font-weight: bold;
  margin-left: 56px;
  margin-right: 56px;
  margin-top: 0;
`;
... (other components created the same way)

I then imported them in a file (index.js), in the same folder as the styles folder, containing the card.js file, where I used them like so;

import React from 'react';
import {Title, (some other components) } from './styles/card';

export default function Card({ children, ...restProps }) {
 return <Container {...restProps}>{children}</Container>
}

Card.Title = function CardTitle({ children, ...restProps }) {
  return <Title {...restProps}>{children}</Title>;
};

I then I used the same method in all other styled-components files, but it doesn't work here. I'd like to know the cause, or if there's a better method of using styled-components.

Job Oaikhenah Job Oaikhenah · Accepted Answer · 2020-11-06T00:45:31

Figured it out! React styled-components works perfectly when applied correctly. The problem was a typo error in my code.
I wrote

&{Picture}

when calling an earlier declared styled component instead of

${Picture}

React styled-components not applying styles to components

1 Answers