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?