all custom FC has same type

src/components/task-list/task-list-header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./task-list-header.module.css";
 
-export const TaskListHeaderDefault: React.SFC<{
+export const TaskListHeaderDefault: React.FC<{
   headerHeight: number;
   rowWidth: string;
   fontFamily: string;

src/components/task-list/task-list-table.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./task-list-table.module.css";
 import { Task } from "../../types/public-types";
 
-export const TaskListTableDefault: React.SFC<{
+export const TaskListTableDefault: React.FC<{
   rowHeight: number;
   rowWidth: string;
   fontFamily: string;

src/components/task-list/task-list.tsx

@@ -12,13 +12,13 @@ export type TaskListProps = {
   locale: string;
   tasks: Task[];
   horizontalContainerClass?: string;
-  TaskListHeader: React.SFC<{
+  TaskListHeader: React.FC<{
     headerHeight: number;
     rowWidth: string;
     fontFamily: string;
     fontSize: string;
   }>;
-  TaskListTable: React.SFC<{
+  TaskListTable: React.FC<{
     rowHeight: number;
     rowWidth: string;
     fontFamily: string;

src/types/public-types.ts

@@ -71,13 +71,13 @@ export interface StylingOption {
     fontSize: string;
     fontFamily: string;
   }>;
-  TaskListHeader?: React.SFC<{
+  TaskListHeader?: React.FC<{
     headerHeight: number;
     rowWidth: string;
     fontFamily: string;
     fontSize: string;
   }>;
-  TaskListTable?: React.SFC<{
+  TaskListTable?: React.FC<{
     rowHeight: number;
     rowWidth: string;
     fontFamily: string;