如何在 styled-components 中将 props 传递给导入的组件

Question

这里出现了一个挑战，我正在使用React Native ，我需要将道具传递给RectButton ，有人知道怎么做吗？

因为它不是标准的 React Native 功能，它是从react-native-gesture-handler导入的，所以我无法通过styled-components访问它，我想要“像这样”的东西：

export const CheckBoxInput = styled(RectButton)<CheckBoxInputProps>`
  border: 1px solid ${h4_app_color};
  width: 20px;
  height: 20px;
  border-radius: 20px;

  ${(props) =>
    props.filled
      ? css`
          background-color: ${h4_app_color};
        `
      : css`
          background-color: white;
        `}
`;

我的道具是这样的：

interface CheckBoxInputProps {
  filled?: boolean;
}

Answer 1

我不明白为什么您在这里检查filled的道具时遇到问题。 通过以下方式将其应用于组件：

<CheckBoxInputProps filled={yourValueHere} />


export const CheckBoxInput = styled(RectButton)<CheckBoxInputProps>`
  border: 1px solid ${h4_app_color};
  width: 20px;
  height: 20px;
  border-radius: 20px;

  ${(props) =>
    props.filled
      ? css`
          background-color: ${h4_app_color};
        `
      : css`
          background-color: white;
        `}
`;

如果您特别想将道具传递给组件<RectButton />而不将其应用于其样式，那么您可以这样做：

export const CheckBoxInput = styled(RectButton).attrs((
 {filledValue}: {filledValue: boolean}
) => {
 filled: filledValue   <-- This will pass the value to RectButtons 'filled' prop
}))<CheckBoxInputProps>`

`;

并像这样使用它：

<CheckBoxInputProps filledValue={yourValueHere} />