时间戳

首页 > 解决方案 > 带有样式组件的 TypeScript

reactjs - 带有样式组件的 TypeScript

问题描述

TypeScript 新手在这里。我有一个下面的组件styled-components，我想将其转换为TypeScript.

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'


const propTypes = {
  name: PropTypes.string.isRequired // https://material.io/tools/icons/?style=baseline
}

const Icon = styled(({name, className, ...props}) => <i className={`material-icons ${className}`} {...props}>{name}</i>)`
  font-size: ${props => props.theme.sizeLarger};
`

Icon.propTypes = propTypes

export default Icon

我知道我可以propTypes用interface

interface Props {
  name: string
}

但是，TypeScript 抱怨我没有className声明。问题是，理想情况下，我希望将interface用作开发人员可以提供的道具的一种规范，而不必className声明theme诸如styled-components.

如何正确将此组件转换为 TypeScript？

标签： reactjstypescriptstyled-components

解决方案

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

interface Props {
  name: string;
  className?: string;
}

const NonStyledIcon: React.SFC<Props> = ({ name, className, ...props }) => (
  <i className={`material-icons ${className}`} {...props}>
    {name}
  </i>
);

const Icon = styled(NonStyledIcon)`
  font-size: ${props => props.theme.sizeLarger};
`;

export default Icon;

根据 styled-components TypeScript 文档：定义组件时，您需要在 Props 界面中将 className 标记为可选

推荐阅读