在道具和 TypeScript 中使用样式化组件

小开

我自己也在努力解决这个问题，但是我认为问题在于您正在使用样式化组件中的 Props 接口。尝试用图像道具创建另一个界面，并在你的样式组件中使用它:

import * as React from "react";
import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";


// -- types ----------------------------------------------------------------- //
export interface Props {
onPress: any;
src: any;
width: string;
height: string;
}




export interface ImageProps {
src: string;
width: string;
height: string;
}


// -- styling --------------------------------------------------------------- //
const Icon = styled.Image`
width: ${(p: ImageProps ) => p.width};
height: ${(p: ImageProps ) => p.height};
`;


class TouchableIcon extends React.Component<Props> {
// -- default props ------------------------------------------------------- //
static defaultProps: Partial<Props> = {
src: null,
width: "20px",
height: "20px"
};


// -- render -------------------------------------------------------------- //
render() {
const { onPress, src, width, height } = this.props;
return (
<TouchableOpacity onPress={onPress}>
<Icon source={src} width={width} height={height} />
</TouchableOpacity>
);
}
}


export default TouchableIcon;

看起来有用，但我讨厌复制那些接口。希望其他人可以展示正确的方式或者也许嵌入到道具的 ImageProps？

小开

最佳答案

这个答案已经过时了，最新的答案在这里: https://stackoverflow.com/a/52045733/1053772

据我所知，目前还没有正式的办法但是你可以用一点小技巧来解决它。首先，创建一个包含以下内容的 withProps.ts文件:

import * as React from 'react'
import { ThemedStyledFunction } from 'styled-components'


const withProps = <U>() => <P, T, O>(fn: ThemedStyledFunction<P, T, O>) =>
fn as ThemedStyledFunction<P & U, T, O & U>


export { withProps }

现在，在 .tsx文件中，像这样使用它:

// ... your other imports
import { withProps } from './withProps'


export interface IconProps {
onPress: any;
src: any;
width: string;
height: string;
}


const Icon = withProps<IconProps>()(styled.Image)`
width: ${(p: IconProps) => p.width};
height: ${(p: IconProps) => p.height};
`;

你应该可以走了。它绝对是没有的理想选择，并且希望有一种方法可以很快在 TS 中提供泛型来模板文字，但是我想现在这是您的最佳选择。

信用是给予应得的信用: 我抄袭了这从给你

小开

最近有一些新的发展，有了新版本的 Type 脚本(例如3.0.1)和样式化组件(例如3.4.5) ，就不需要单独的助手了。您可以直接为样式化组件指定道具的接口/类型。

interface Props {
onPress: any;
src: any;
width: string;
height: string;
}


const Icon = styled.Image<Props>`
width: ${p => p.width};
height: ${p => p.height};
`;

如果你想更精确，忽略 onPress

const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
width: ${p => p.width};
height: ${p => p.height};
`;

小开

您只需指定 interface:

import { createGlobalStyle, css } from 'styled-components';


interface PropsGlobalStyle {
dark: boolean
}


export default createGlobalStyle`
${({ dark }: PropsGlobalStyled) => css`
body {
box-sizing: border-box;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: ${dark ? '#fff' : '#000'};
background-color: ${dark ? '#000' : '#fff'};
}
`};
`;

小开

样式化组件样式化组件

    import styled from 'styled-components';


interface Props {
height: number;
}


export const Wrapper = styled.div<Props>`
padding: 5%;
height: ${(props) => props.height}%;
`;

索引

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>
);

应该可以

小开

一个使用 ColorCard和彩色道具的例子

import styled from 'styled-components';


export const ColorCard = styled.div<{ color: string }>`
background-color: ${({ color }) => color};
`;

小开

来自@elnygren 的回答对我很有效。我只有一个问题。如何为以下代码分配默认值(从@elnygren 的答案复制)。例如:。如果我不想传递任何值到’宽度’和’高度’将使用默认值。

const Icon = styled.Image<Pick<Props, 'src' | 'width' | 'height'>>`
width: ${p => p.width};
height: ${p => p.height};
`;

小开

最简单的风格化组件医生说:

import styled from 'styled-components';
import Header from './Header';


const NewHeader = styled(Header)<{ customColor: string }>`
color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor