时间戳

首页 > 解决方案 > 使用 ReactJs 和 Typescript 在组件中调用主题道具时出错

reactjs - 使用 ReactJs 和 Typescript 在组件中调用主题道具时出错

问题描述

我需要将主题的颜色传递给组件，我正在使用类型脚本（我是初学者）。

我遇到了一个我无法解决的错误。

错误是：参数'props'隐式具有'any'类型.ts（7006）

它出现在我的代码的颜色行中

<Linkxx
 color={(props) => props.theme.colors.red}
 size={11}
 weight={500}
 decoration={false}
/>

我的组件

import React from 'react';

import { Container } from './styles';

interface LinkProps {
  color: string;
  size?: number;
  weight?: number;
  decoration?: boolean;
}

const Link: React.FC<LinkProps> = ({ color, size, weight, decoration }) => {
  return (
    <Container
      decoration={decoration}
      weight={weight}
      size={size}
      color={color}
      to="/teste"
    >
      teste
    </Container>
  );
};

export default Link;

出现问题的代码

import React from 'react';

import Header from '../../components/Header';
import Linkxx from '../../components/Link';

import {
  Container,
  Content,
  UserCard,
  Avatar,
  UserData,
  Canais,
  BoxAction,
} from './styles';

const User: React.FC = () => {
  return (
    <>
      <Header />
      <Container>
        <Content>
          <h1>User</h1>
          <UserCard>
            <Avatar />
            <UserData>
              <span>Sample Name</span>
              <small>sample@gmail.com</small>
            </UserData>
            <Canais>
              <span>Adm, Manager</span>
              <div>
                <small>test</small>
                <small>test</small>
                <small>test</small>
              </div>
            </Canais>
            <BoxAction>
              <div>
                <Linkxx
                  color={(props) => props.theme.colors.red}
                  size={11}
                  weight={500}
                  decoration={false}
                />
              </div>
            </BoxAction>
          </UserCard>
        </Content>
      </Container>
    </>
  );
};

export default User;

调用组件时如何使用主题属性？

标签： reactjstypescriptstyled-components

解决方案

尝试这个：

<Linkxx
  // color={(props) => props.theme.colors.red} // You passed a function
  color={props.theme.colors.red} // Try passing a value or string i.e. props.theme.colors.red
  size={11}
  weight={500}
  decoration={false}
/>

正如你的界面所说color的是字符串：

interface LinkProps {
  color: string;  // color is string
  size?: number;
  weight?: number;
  decoration?: boolean;
}

推荐阅读