Error when calling theme Props in component using ReactJs and Typescript

0 votes

I need to pass the color of a theme to a component, I'm using type script (I'm a beginner).

I came across an error that I can't solve.

The error is: Parameter 'props' implicitly has an 'any' type.ts(7006)

and it appears in the color line of my code

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

My component

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;

The code where the problem occurs

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;

How can I use the theme properties when calling my component?

Jul 5, 2022 in TypeSript by Nina
• 3,060 points
1,227 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In TypeSript

0 votes
1 answer
0 votes
1 answer

How to define props in TypeScript where a parent component injects props in its children?

Typescript doesn't remove this special rule "!text" ...READ MORE

answered Jun 16, 2022 in TypeSript by Nina
• 3,060 points
1,215 views
0 votes
0 answers

In typescript, why do the | and & operators flip their meaning when used on function types?

In this code, example1 and example2 are confusing me: type F1 = ...READ MORE

Jul 13, 2022 in TypeSript by Logan
• 2,140 points
543 views
0 votes
1 answer

Using TypeScript, and Object.assign gives me an error "property 'assign' does not exist on type 'ObjectConstructor'"

You can use type assertion, like this: (<any>Object).as ...READ MORE

answered Aug 3, 2022 in TypeSript by Abhinaya
• 1,160 points
4,613 views
0 votes
1 answer

What is TypeScript and why would I use it in place of JavaScript?

TypeScript is a superset of JavaScript which primarily ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,060 points
569 views
0 votes
1 answer

How to use next-seo for setting nextjs meta tag with multiple OGP images?

https://github.com/garmeeh/next-seo use this git repo that contains ...READ MORE

answered Feb 24, 2022 in Others by narikkadan
• 63,600 points
6,163 views
0 votes
1 answer

"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

The first thing to highlight is that ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
4,290 views
0 votes
1 answer

Typescript: Property "XXX" does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Double check the newly added object types. ...READ MORE

answered Jun 8, 2022 in TypeSript by Nina
• 3,060 points
46,201 views
0 votes
1 answer

TypeScript and React Native: Are the type definitions for RN styles wrong?

You can test some of ways for ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,060 points
3,670 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP