title: Styling a separate functional component with Styled Components
body: <p>How do I style the <code>News</code> component with the same styling applied to the <code>F.Link</code> component? I want to style this component while keeping it separate as its own functional component.</p>
  <pre class="lang-js prettyprint-override"><code>import styled from 'styled-components';
  
  const F = {
    Container: styled.div`
      ...
    `,
    Text: styled.p`
      ...
    `,
    Link: styled.a`
      transition: color 0.5s linear;
      text-decoration: none;
      color: ${(props) =&gt; (props.isDark ? '...' : '...')};
    `,
  };
  
  export const Footer = ({ isDark }) =&gt; {
    const isPhone = window.matchMedia('...').matches;
  
    const News = () =&gt; (
      &lt;&gt;
        &lt;a href='#'&gt;News&lt;/a&gt;
      &lt;/&gt;
    );
  
    return (
      &lt;F.Container&gt;
        &lt;F.Text&gt;Thanks for stopping by
          &lt;F.Link isDark={isDark} href='#'&gt;Contact&lt;/F.Link&gt;
          {isPhone ? (
            &lt;&gt;&lt;/&gt;
          ) : (
            &lt;News/&gt;
          )}
        &lt;/F.Text&gt;
      &lt;/F.Container&gt;
    );
  };
  </code></pre>