Styling Nested Components in Styled-Components

The best way to do this would be to export DropdownBase, Trigger, and Submenu from your Dropdown component, then import them along with Dropdown and override this like this:

import { Dropdown, DropdownBase, Trigger, Submenu } from '../path/to/dropdown'import styled from 'styled-components'const MyComponent = () => {  return <StyledDropdown />}const StyledDropdown = styled(Dropdown)`  ${DropdownBase} {    // custom styles  }  ${Trigger} {    // custom styles  }  ${Submenu} {    // custom styles  }`

This works well because it targets the specific child styled components.

Alternatively, you could target them based on their tag or child order, but this may fail if you make updates to the Dropdown component.

How about this:

const Dropdown = (    <DropdownBase className={dropdownBaseClassName}>      <Trigger className={triggerClassName}>        {title}      </Trigger>      <Submenu className={submenuClassName}>        {children}      </Submenu>    </DropdownBase>  )

import { Dropdown } from '../path/to/dropdown'<StyledDropdown />const StyledDropdown = styled(Dropdown).attrs({ dropdownBaseClassName:..., triggerClassName:..., submenuClassName:... })`.${dropdownBaseClassName} {// styles}.${triggerClassName} {// styles}.${submenuClassName} {// styles}

Extending the answer by @Appel21, I would do something like this using dot notation:

import styled from 'styled-components'export const Dropdown = () => (    <DropdownBase>      <Trigger>        {title}      </Trigger>      <Submenu>        {children}      </Submenu>    </DropdownBase>  )const DropdownBase = styled.div`  /* Default Styles */`const Trigger = styled(Link)`  /* Default Styles */`const Submenu = styled.div`  /* Default Styles */`Dropdown.base = DropdownBase;Dropdown.trigger = Trigger;Dropdown.subMenu = Submenu;

And then to use it:

import { Dropdown } from '../path/to/dropdown' import styled from 'styled-components'    const MyComponent = () => {  return <StyledDropdown />}const StyledDropdown = styled(Dropdown)`  ${Dropdown.base} {    // custom styles  }  ${Dropdown.trigger} {    // custom styles  }  ${Dropdown.submenu} {    // custom styles  }`

This way you have to export only one component and you get autocompletion of the subcomponents, knowing perfectly what subcomponents you can style :)