How to use the styled-components.article function in styled-components

import React, { useState, useEffect } from "react";
import axios from "axios";
import styled from "styled-components";
import Fade from "react-reveal/Fade";
import Seachbar from "../components/Search";
// import Plus from "../icons/footerPlus";
import SearchLoading from "../components/SearchLoadingIndicator";
import AddArrow from "../icons/addArrow";
import addToJsonDbfromSearch from "../api/addToDbJsonFromSearch";

// import Plus from "../icons/footerPlus";

const AddButton = styled.button``;

const SearchItem = styled.article`
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: ${({ theme }) => theme.listItemBackground};
  margin: 25px;
  color: ${({ theme }) => theme.text};

  border-radius: ${({ theme }) => theme.borderRadius};
  font-family: "futura";
  align-items: center;
  border: #4f5359e6 solid 0.5px;
  color: lightslategray;
  padding: 25px;
`;

const FixedSearch = styled(Seachbar)`

import { SwatchHeader, Title } from './../components'
import { Section, PBig } from './../styles'
import { spacing } from './../styles/theme.json'

export default () =>
  <section>
    
      <title>
    &lt;/SwatchHeader&gt;
    &lt;AboutCopy&gt;
      &lt;PBig&gt;348 color combinations originated by Sanzo Wada (1883-1967) who, in that time of increasingly avant-grade and diversified use of color, was quick to focus on the importance of color and laid the foundation for contemporary color research. Sanzo Wada was active as an artist, art school instructor, costume designer for the movies and the theater, and kimono and fashion designer who employed his extensive and versatile talents to do innovative work that centered primarily on visual perception and form.&lt;/PBig&gt;
    &lt;/AboutCopy&gt;
  &lt;/Section&gt;

// STYLES
const AboutCopy = styled.article`
  width: 100%;
  padding-top: ${spacing.double_pad};
  padding-bottom: ${spacing.big_pad};
  padding-left: ${spacing.single_pad};
`</title></section>

const StyledLink = StyledA.extend`
  padding: 0 0.25rem;
  color: ${props => props.theme.tints.brightgreen};
  &:active,
  &:hover,
  &:focus {
    color: ${props => props.theme.secondary.red};
    text-decoration: underline;
  }
`

const ArticleTag = styled(Tag)`
  align-self: center;
`

const ArticleContent = styled.article`
  grid-area: cont;
  padding: 0.8em;
`

const StoryBlog = ({ data, location }) => {
  //console.log(data)
  const goBack = () => navigateTo('/stories')
  const {
    title,
    publishDate,
    tags,
    author,
    content
  } = data.contentfulBlog
  let { source } = data.contentfulBlog
  source = source ? source : location.pathname

`;

const TwitterIcon = styled(TwitterIconSvg)`
  fill: #1da0f2;
`;

const LinkedinIcon = styled(LinkedinIconSvg)`
  fill: #0073b0;
`;

const BlogContent = styled.div`
  display: flex;
  flex-direction: column;
`;

const Article = styled.article`
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-bottom: 40px;
  padding-bottom: 20px;

  @media only screen and (min-width: 800px) {
    border: 1px solid #ccc;
    border-top: 0 none;
  }
`;

const Content = styled.div`
  > * {
    padding-right: 20px;
    padding-left: 20px;

import styled from 'styled-components';
import media from 'styled-media-query';

import { Text, Heading, Link } from '~/styles/typography';
import { Sizes, Color } from '~/styles/constants';

export default styled.article`
  ${Text.primary}

  color: rgba(255, 255, 255, 0.9);

  i {
    font-style: italic;
  }

  b {
    font-weight: bold;
  }

  &:not(:first-child) {
    margin-top: ${Sizes.md};
  }
  &:not(:last-child) {

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

const Article = styled.article`
  display: flex;
  padding:1rem;
  flex-direction: column;
  align-items: center;
  p {
    max-width: 50%;
    font-size: 1.2rem;
  }
`;

export default ({ match }) =>
  <div>
    <nav>
    Home
    About
    </nav></div>

display: flex;
  align-items: center;
  transition: color 200ms;

  &:hover {
    color: #0094c6;
  }
`;

const Author = styled.span`
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
`;

const Article = styled.article`
  display: flex;
  min-height: 300px;
  overflow: hidden;
  margin: 0 20px 5vw;
  border-radius: 3px;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08), 0 5px 20px 0 rgba(0, 0, 0, 0.06);
  transition: transform 300ms, box-shadow 300ms;
  will-change: transform, box-shadow;
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  background-color: #fff;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 0 10px 0 rgba(0, 0, 0, 0.06);

import styled from "styled-components";

const TestDiv = styled.article`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${({ theme }) => theme.listItemBackground};
  flex-grow: 1;
  align-items: center;
  margin: 20px;
  padding: 20px;
  border: black solid 1px;
  border-radius: ${({ theme }) => theme.borderRadius};
  box-shadow: black 0px 6px 6px 6px;
  color: lightslategray;
  margin-bottom: 100px;
`;

export default TestDiv;

const Wrapper = styled.div`
  height: auto;
  width: 100%;
  padding: ${rem(60)} 0;
  box-sizing: border-box;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url(/static/backgrounds/sneakers-bg.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: ${mostlyBlack};
`

const Container = styled.article`
  max-width: ${rem(720)};
  padding: 0 ${rem(15)};
  margin: 0 auto;
`

const Meta = styled.span`
  display: inline-block;
  padding: 0 ${rem(20)};
  margin-bottom: ${rem(30)};
  font-size: ${rem(14)};
  font-weight: 700;
  letter-spacing: ${rem(2)};
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.9);
`

import styled from 'styled-components'

import { theme, cs } from '@utils'

export const Wrapper = styled.article`
  ${cs.flexGrow('justify-center')};
  padding-top: 20px;
  min-height: 300px;

  ${cs.media.tablet`
    padding: 8px 0;
  `};
`
export const InnerWrapper = styled.div`
  ${cs.flex()};
  width: 100%;
  max-width: ${cs.MAX_CONTENT_WIDTH};
  padding: 0 6vw;
  ${cs.media.desktop`
    padding: 0 4vw;
  `};