title: Styling Nested Components in Styled-Components
body: <p>I have created a Dropdown Component in React using Styled Components.  Here is a simplified outline of the component:</p>
  <pre><code>const Dropdown = (
      &lt;DropdownBase&gt;
        &lt;Trigger&gt;
          {title}
        &lt;/Trigger&gt;
        &lt;Submenu&gt;
          {children}
        &lt;/Submenu&gt;
      &lt;/DropdownBase&gt;
    )
  
  const DropdownBase = styled.div`
    /* Default Styles */
  `
  
  const Trigger = styled(Link)`
    /* Default Styles */
  `
  
  const Submenu = styled.div`
    /* Default Styles */
  `
  </code></pre>
  <p>Now, when I import and use the component I want to be able to override the default styles of the nested components (i.e., <code>DropdownBase</code>, <code>Trigger</code> and <code>Submenu</code>).  And I want to be able to override those default styles using Styled Components.  The problem is, that I do not import those nested components -- I only import the <code>Dropdown</code> component -- like this:</p>
  <pre><code>import { Dropdown } from '../path/to/dropdown'
  
  &lt;Dropdown /&gt;
  </code></pre>
  <p>So I am wondering, how can I override those nested components when I import the parent component using Styled Components?</p>