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，Trigger和Submenu）。而且我希望能够使用样式化组件覆盖这些默认样式。问题是，我不导入那些嵌套的组件-我仅导入Dropdown组件-像这样：

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

<Dropdown />

所以我想知道，当我使用样式化组件导入父组件时，如何覆盖那些嵌套组件？

谢谢。

Answer 1

执行此操作的最佳方法是从您的Dropdown组件中导出DropdownBase，Trigger和Submenu，然后将它们与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
  }
`

这很好，因为它针对特定的子样式的组件。

或者，您可以根据它们的标签或子顺序来定位它们，但是如果对Dropdown组件进行更新，则可能会失败。

Answer 2

如何？

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 3

您似乎想要themes。

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>)

在样式化组件中设置嵌套组件的样式

3 个答案: