在 Typescript 中使用样式组件，prop 不存在？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52404958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using styled components with Typescript, prop does not exist?
提问by user1283776
Here is my styled component.
这是我的样式组件。
import * as React from 'react';
import styled from 'styled-components';
import { ComponentChildren } from 'app-types';
interface Props {
children: ComponentChildren;
emphasized: boolean;
}
const HeadingStyled = styled.h2`
${props => props.emphasized && css`
display: inline;
padding-top: 10px;
padding-right: 30px;
`}
`;
const Heading = (props: Props) => (
<HeadingStyled>
{props.children}
</HeadingStyled>
);
export default Heading;
I get warnings that:
我收到以下警告：
Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.Cannot find name 'css'. Did you mean 'CSS'?
Property 'emphasized' does not exist on type 'ThemedStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, any>'.Cannot find name 'css'. Did you mean 'CSS'?
How can I get this to work?
我怎样才能让它工作？
回答by Agney
- The styled component will have to specify the prop to pass to the component like
styled("h2")<IProps>. You can read more about the pattern from documentation cssis not required here, it is added as a helper when you need to actually return CSS from a function. Check out conditional rendering.
- 样式化组件必须指定要传递给组件的 prop，如
styled("h2")<IProps>. 您可以从文档中阅读有关该模式的更多信息 css在这里不是必需的，当您需要从函数实际返回 CSS 时，它会被添加为帮助程序。查看条件渲染。
Taking these into account, the component becomes:
考虑到这些，组件变成：
const HeadingStyled = styled("h2")<{emphasized: boolean}>`
${props => props.emphasized && `
display: inline;
padding-top: 10px;
padding-right: 30px;
`}
`;
回答by Bruno Monteiro
The previous answer worked for me, but just to add some information that was also helpful in my case:
上一个答案对我有用，但只是添加了一些对我的情况也有帮助的信息：
StyledComponents uses a "ThemedStyledFunction" interface that allows the user to define additional Prop Types.
StyledComponents 使用“ThemedStyledFunction”接口，允许用户定义额外的道具类型。
That means you could create an interface like:
这意味着您可以创建一个界面，如：
interface HeadingStyled {
emphasized: boolean;
}
And use it on the component:
并在组件上使用它：
const HeadingStyled = styled("h2")<HeadingStyled>`
${props => props.emphasized && `
display: inline;
padding-top: 10px;
padding-right: 30px;
`}
`;
(Which is a cleaner way to implement what @BoyWithSilverWings suggested, in case you have multiple props)
（这是实现@BoyWithSilverWings 建议的更简洁的方法，以防您有多个道具）
Check this discussion for more complete information:
查看此讨论以获取更完整的信息：
https://github.com/styled-components/styled-components/issues/1428#issuecomment-358621605
https://github.com/styled-components/styled-components/issues/1428#issuecomment-358621605
