Стилизация вложенных компонентов в Styled-Components

Question

Я создал выпадающий компонент в React, используя стилизованные компоненты. Вот упрощенная схема компонента:

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 */
`

Теперь, когда я импортирую и использую компонент, я хочу иметь возможность переопределить стили по умолчанию для вложенных компонентов (т. Е. DropdownBase, * 1005). * и Submenu). И я хочу иметь возможность переопределить эти стили по умолчанию с помощью Styled Components. Проблема в том, что я не импортирую эти вложенные компоненты - я импортирую только компонент Dropdown - вот так:

import { Dropdown } from '../path/to/dropdown'

<Dropdown />

Поэтому мне интересно, как я могу переопределить эти вложенные компоненты, когда я импортировать родительский компонент с помощью Styled Components?

Спасибо.

Answer 1

Как насчет этого:

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
}

Answer 2

Лучший способ сделать это - экспортировать DropdownBase, Trigger и Submenu из вашего компонента Dropdown, затем импортировать их вместе с Dropdown и переопределить это так:

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
  }
`

Это работает хорошо, потому что это предназначается для указанных c дочерних стилевых компонентов.

Кроме того, вы можете настроить таргетинг на них на основе их тега или дочернего порядка, но это может не произойти, если вы обновите компонент Dropdown.

Answer 3

Похоже, темы - это то, что вы хотите.

import { render } from "react-dom"
import { ThemeProvider } from "styled-components"

const Dropdown = (
    <DropdownBase>
      <Trigger>
        {title}
      </Trigger>
      <Submenu>
        {children}
      </Submenu>
    </DropdownBase>
  )

const defaultTheme = {color:'black'}
const specificTheme = {color:'red'}

const DropdownBase = styled.div`
  /* Default Styles */
  color:${props=>props.theme.color};
`

const Trigger = styled(Link)`
/* Default Styles */
color:${props=>props.theme.color};
`

const Submenu = styled.div`
  /* Default Styles */
  color:${props=>props.theme.color};
`

render(<ThemeProvider theme={defaultTheme}>
    <div>
        <Dropdown>Your default dropdown</Dropdown>
        <div>
            Your hierarchy
            <ThemeProvider theme={specificTheme}>
                <Dropdown>Your custom dropdown</Dropdown>
            </ThemeProvider>
        </div>
    </div>
</ThemeProvider>)