Reactjs React样式的组件、道具和打字脚本

我研究了样式化组件并尝试了网站上的示例，但我也想使用typescript

我这里有一个简单的例子

import React from 'react';
import './App.css';
import styled from 'styled-components';

interface IProps{
  primary: boolean
}

const App:React.FC<IProps> = ({primary}) => {
  return (
    <div className="App">
      <h1>Styled Components</h1>

      <Button>Normal</Button>
      <Button primary>Primary</Button>
    </div>
  );
}

const Button = styled.button`
  background: ${props => props.primary ? 'red' : 'white'};
  color: ${props => props.primary ? 'white' : 'red'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 1px solid green;
  border-radius: 3px;
`

export default App;

从“React”导入React；
导入“/App.css”；
从“样式化组件”导入样式化；
接口IProps{
主要：布尔值
}
常量App:React.FC=（{primary}）=>{
返回(
样式化组件
正常的
主要的，重要的
);
}
const Button=styled.Button`
背景：${props=>props.primary？'red'：'white'}；
颜色：${props=>props.primary？'white'：'red'}；
字号：1em；
边缘：1米；
填充物：0.25em 1米；
边框：1px纯绿色；
边界半径：3px；
`
导出默认应用程序；

但我在主道具上有错误

我发现了错误

Property 'primary' does not exist on type 'ThemedStyledProps<Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | ... 264 more ... | "onTransitionEndCapture"> & { ...; }, any>'

类型“ThemedStyledOps”上不存在属性“primary”

---

我如何使用带有typescript的样式化组件

使用带有typescript的样式化组件：

const Button = styled.button<{ primary?: boolean }>`

const-Button=styled.Button`

完整代码：

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

interface IProps{
  primary?: boolean
}

const App:React.FC<IProps> = () => {
  return (
    <div className="App">
      <h1>Styled Components</h1>
      <Button>Normal</Button>
      <Button primary>Primary</Button>
    </div>
  );
}

const Button = styled.button<{ primary?: boolean }>`
  background: ${props => props.primary ? 'red' : 'white'};
  color: ${props => props.primary ? 'white' : 'red'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 1px solid green;
  border-radius: 3px;
`

export default App;

import*as React from'React'；
从“样式化组件”导入样式化；
接口IProps{
主要？：布尔值
}
常量应用程序：React.FC=（）=>{
返回(
样式化组件
正常的
主要的，重要的
);
}
const Button=styled.Button`
背景：${props=>props.primary？'red'：'white'}；
颜色：${props=>props.primary？'white'：'red'}；
字号：1em；
边缘：1米；
填充物：0.25em 1米；
边框：1px纯绿色；
边界半径：3px；
`
导出默认应用程序；

---

我从我的项目中准备了一个例子

ts（样式化组件）

从“样式化组件”导入样式化；
界面道具{
高度：数字；
}
export const Wrapper=styled.div`
填充：5%；
高度：${（道具）=>props.height}%；
`;

index.tsx

import React, { FunctionComponent } from 'react';
import { Wrapper } from './Wrapper';

interface Props {
    className?: string;
    title: string;
    height: number;
}

export const MainBoardList: FunctionComponent<Props> = ({ className, title, height }) => (
    <Wrapper height={height} className={className}>
        {title}
    </Wrapper>
);

import React，{FunctionComponent}来自“React”；
从“./Wrapper”导入{Wrapper}；
界面道具{
类名？：字符串；
标题：字符串；
高度：数字；
}
导出常量主板列表：FunctionComponent=（{className，title，height}）=>(
{title}
);

您可以将接口/类型从'index.tsx'导入'Wrapper.ts'以重用

另外，您可以这样指定类型

export const Wrapper=styled.div`

---

我现在正在看这个，这能回答你的问题吗？我现在得到了你的代码沙盒上的错误，但我的应用程序根本不会显示。错误在index.tsx-

属性“primary”在类型“{}”中丢失，但在类型“IProps”中是必需的。ts（2741）

我在接口中用

primary？：boolean

修复了它

import React, { FunctionComponent } from 'react';
import { Wrapper } from './Wrapper';

interface Props {
    className?: string;
    title: string;
    height: number;
}

export const MainBoardList: FunctionComponent<Props> = ({ className, title, height }) => (
    <Wrapper height={height} className={className}>
        {title}
    </Wrapper>
);