Playing with styled components - separating

App.tsx

const Container = styled.div`
  width: 400px;
  margin: 30px auto;
  font-family: ${fontFamily};
  font-size: ${fontSize};
  color: ${gray2};
`;

const List = styled.ul`
  list-style: none;
  padding: 0px 20px;
  background-color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: 3px solid ${accent1};
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
`;

const ListItem = styled.li`
  display: flex;
  flex-direction: column;
  padding: 10px 0px;
  border-top: 1px solid ${gray5};
  :first-child {
    border-top: none;
  }
`;

const Title = styled.span`
  font-size: 18px;
  color: ${gray1};
  margin-bottom: 5px;
`;

const App = () => (
  <Container>
    <List>
      {posts.map(({ id, title, body }) => (
        <ListItem key={id}>
          <Title>{title}</Title>
          <span>{body}</span>
        </ListItem>
      ))}
    </List>
  </Container>;
);