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

`};
  ${media.phone`
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        'b b b b b b b b b';
    /* background: palevioletred; */
  `};
`

const LinksWrapper = styled.div`
  font-size: 2rem;
  font-weight: 700;
  grid-area: ${props => props.area};
`

const StyledLink = styled(Link)`
  font-family: ${props => props.theme.fontHeader};
  color: ${props => props.theme.fontDark};
  margin: 0.25rem;
  padding: 0.25rem;
`

const Header = props => {
  return (
    
      
        
           <span>{title}</span>} /&gt;
        
      
    
  )

{props.priority === 'high' && (
      
    )}
    {props.priority === 'middle' && (
      
    )}
    {props.priority === 'low' && (
      
    )}
  
)
// ______________________________________________________
//
// @ StyledView

export default styled(View)`
  margin: 10px;
`

import styled from 'styled-components'
import Header from './../Components/Header'
import Query from './../Components/Query'
import SPEAKERS from '../Queries/SPEAKERS'
import GET__SPEAKERS_SEARCH from '../Queries/Local/GET__SPEAKERS_SEARCH'
import { Figure, Img, Caption, Name } from './../Components/Styling/Speaker'
import Nav from './../Components/Nav'
import Filter from '../Utils/search'
import SpeakersMeta from '../Components/MetaTags/Speakers'
import CookieBanner from './../Components/CookieBanner'

const makeLink = name => `/speaker/${name.replace(/\s+/g, '-').toLowerCase()}`

const makeName = name => name.split(' ')

const Wrapper = styled(Flex)`
    @media (max-width: 685px) {
        justify-content: center;
    }
`

const Speakers = ({ data: { searchSpeakers } }) => (
    
        
        <div role="banner">
            <nav>
            <header title="Speakers">
        </header></nav></div>

import React, { Component, Fragment } from 'react'
import styled from 'styled-components'
import Text from 'components/foundations/Text'
import Title from 'components/foundations/Title'
import ProgressBar, {
  ProgressBarContainer
} from 'components/foundations/ProgressBar'
import TranslatedText from 'components/translations/TranslatedText'

type Props = {
  date: string,
  votesFor: number,
  votesAgainst: number
}

const InfoStatusTitle = styled(Text)`
  display: flex;
  align-items: center;
`

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

const VotingValuesWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
`

const VotingValue = styled.div`

overflow-x: hidden;
  overflow-y: auto;
  background: ${props => props.theme.background};
  transition: ${props => props.theme.backgroundTransition};
  padding: 13vh 2rem 2rem;
  outline: none;
`;

const Esc = styled.span`
  display: block;
  text-align: center;
  font-size: 13px;
  height: 1em;
`;

const Close = styled(NudeButton)`
  position: fixed;
  top: 16px;
  right: 16px;
  opacity: 0.75;
  color: ${props => props.theme.text};
  width: auto;
  height: auto;

  &:hover {
    opacity: 1;
  }

  ${breakpoint('tablet')`
    top: 3rem;
    right: 3rem;
  `};

)}
            {!isAuth && (
              
                Signup
              
            )}
            {isAuth && Logout}
          
        
      
    )
  }
}

const StyledMenu = styled(Menu)`
  &&& {
    border-bottom: 2px solid #ffd045;
    padding: 0 15px;
  }
`

const StyledLink = styled.a`
  color: #5f5f5f;
  line-height: 70px;
  padding: 0 2vw;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
`

const factory = tag => {
  const Default = styled(tag)`${style}`
  Default.defaultProps = {
    secondary: true,
  }
  return Default
}

}
`

const StyledHeading = styled(Heading)`
  text-align: center;
`

const Description = styled(Paragraph)`
  text-align: center;
  margin: 2rem;
  @media screen and (max-width: 640px) {
    margin: 1rem;
  }
`

const StyledFeature = styled(Feature)`
  margin: 1rem;
  @media screen and (max-width: 640px) {
    margin: 0;
  }
`

const FeatureList = ({ ...props }) => (
  <div>
    Basic stack
    
      It includes everything necessary to build a tipical web app with focus on productivity and developer experience.<br>
      Learn more about the recomended workflow
    
    
      </div>

const Container = styled.div`
  max-width: ${MAX_HEADER_WIDTH_PX}px;
  height: ${HEADER_HEIGHT_PX}px;
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: 0.4s opacity;
`;

const CosmonautButton = styled(InternalLink)`
  flex-shrink: 0;
  width: ${COSMONAUT_SIZE_PX}px;
  height: ${COSMONAUT_SIZE_PX}px;
  margin-left: ${COSMONAUT_HPADDING_PX}px;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
`;

const HeartButton = styled(InternalLink)`
  flex-shrink: 0;
  width: ${COSMONAUT_SIZE_PX}px;
  height: ${COSMONAUT_SIZE_PX}px;
  margin: 0 ${COSMONAUT_HPADDING_PX}px 0 0;
  background: rgba(231, 0, 138, 0.2);
  border-radius: 50%;