Reactjs TypeScript React，无法向组件发送道具

我有一个简单的按钮组件，我正在用样式化的组件对其进行样式化，但我无法向该组件发送简单的道具，因为TypeScript抱怨没有重载匹配此调用

App.tsx

import React from 'react';

import Button from '../form/button';

export const App = (): React.ReactElement => <Button secondary>Click me</Button>;

从“React”导入React；
从“../form/Button”导入按钮；
export const App=（）：React.ReactElement=>单击我；

Button.tsx

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #333;
  padding: 10px 20px;
  color: ${({ secondary }) => (secondary ? 'white' : 'red')};
`;

interface Props {
  children: string;
  secondary?: any;
}

const Button: React.FC<Props> = ({ children, secondary }) => (
  <StyledButton secondary={secondary}>{children}</StyledButton>
);

export default Button;

从“React”导入React；
从“样式化组件”导入样式化；
const StyledButton=styled.button`
背景色：#333；
填充：10px 20px；
颜色：${（{secondary}）=>（secondary？'white'：'red'）；
`;
界面道具{
儿童：弦；
中学？：任何；
}
常量按钮：React.FC=（{子级，次级}）=>(
{儿童}
);
导出默认按钮；

---

这应该可以，TypeScript需要我指定什么？这个错误没有多大帮助，因为您没有将道具传递给样式化组件，所以它不知道什么是次要的

你可以像这样传递道具（我删除了

子对象

，因为你不需要手动指定）

从“React”导入React；
从“样式化组件”导入样式化；
界面道具{
中学？：任何；
}
const StyledButton=styled.button`
背景色：#333；
填充：10px 20px；
颜色：${（{secondary}）=>（secondary？“白色”：“红色”）}；
`;
常量按钮：React.FC=（{子级，次级}）=>(
{儿童}
);
导出默认按钮；

---

CodeSandbox:

您只需从接口

props

指定传递的、然后被分解的道具，并访问参数

secondary

const StyledButton = styled.button`
  background-color: #333;
  padding: 10px 20px;
  color: ${({secondary}: Props) => (secondary ? 'white' : 'red')}
`;

---

尝试点击me@Sam，仍然说没有重载匹配此调用@alvaro

子级：React.React.node

和

secondary:boolean

@rameshredy，相同的

没有重载匹配此调用

这是工作代码谢谢，我仍然需要将secondary上的类型更改为boolean才能工作，但是有了这些，您的更改现在就很好了是的，

boolean

是您应该使用的

const StyledButton = styled.button`
  background-color: #333;
  padding: 10px 20px;
  color: ${({secondary}: Props) => (secondary ? 'white' : 'red')}
`;