styled components custom props returns no-undef in typescript eslint

I am passing custom props to my styled components in React. Upon running the code, typescript eslint outputs a warning:

   'isActive' is not defined    no-undef

But code seems to work fine and typescript is not reporting any error.

Please see my code below:

JSX

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

const Title= styled.div<{ isActive: boolean }>`
       ${({ isActive}) => isActive && 'color: blue;'}`;

interface IFunctionName{ active:boolean }

const FunctionName: React.FC<IFunctionName> = ({ active }) => 
       (<div><Title isActive={active}> test </Title></div>)

styled components custom props returns no-undef in typescript eslint

0 Answers