Question

我正在尝试使用 typescript、react.js 和 styled-components 构建一个接受主要和次要颜色的组件。我对所有这些技术都比较陌生。我遇到的问题是我似乎无法让样式组件能够看到道具？到目前为止，这是我的代码：

//主索引文件

import * as React from 'react'
import { PropsWithChildren } from 'react'
import { COLOUR } from '../../_core/colours'
import { CloseIcon } from '../../_core/icons/Close'
import { ButtonContainer, Container } from './index.styles'

export interface OverlayProps {
  onClickClose?: () => void
  colour: 'primary' | 'secondary'
}

export const Overlay = ({
  onClickClose,
  colour,
  children,
}: PropsWithChildren<OverlayProps>) => (
  <Container backgroundColour={colour}>
    <ButtonContainer onClick={onClickClose}>
      <CloseIcon fill={COLOUR.primary.blue_slate} variant="fill" />
    </ButtonContainer>
    {children}
  </Container>
)

//样式化组件文件：

import styled from 'styled-components'
import { COLOUR } from '../../_core/colours'
import { ONBOARDING_MAX_WIDTH, UNIT_2, UNIT_4 } from '../../_core/grid'

export const Container = styled.div`
  display: flex;
  flex-direction: column;
  position: absolute;
  border-radius: ${UNIT_2};
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: ${ONBOARDING_MAX_WIDTH};
  z-index: 100;
  background-color: ${(props) => {
    switch (props.backgroundColour) {
      case 'primary':
        return COLOUR.tints.pastel_yellow40
      case 'secondary':
        return COLOUR.secondary.white
    }
  }};
`

export const ButtonContainer = styled.div`
  display: flex;
  cursor: pointer;
  margin-left: auto;
  > svg {
    padding: ${UNIT_2};
    height: auto;
    width: ${UNIT_4};
  }
`

如您所见，我正在尝试设置一个开关，该开关根据主要或次要颜色的状态设置背景颜色。每个样式组件指南似乎都推荐这种方式，那么问题是什么？

如何使用样式组件传递道具？

0 个答案: