From 21a7a8a0b79797cedbb5c7092bfc57978fe64113 Mon Sep 17 00:00:00 2001
From: Gavin Gregory <gavin.ian.gregory@gmail.com>
Date: Mon, 14 Aug 2017 14:56:59 -0400
Subject: [PATCH] added an optional (react) style property to the
 react-fontawesome definition file. (#18807)

* added a React style property to the react-fontawesome definition file.

* made amendments to FontAwesomeProps as suggest by vincaslt, now successfully extend React.HTMLProps<FontAwesome>.
---
 types/react-fontawesome/index.d.ts                  | 12 ++++++------
 types/react-fontawesome/react-fontawesome-tests.tsx | 13 ++++++++++++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/types/react-fontawesome/index.d.ts b/types/react-fontawesome/index.d.ts
index 1c7312b6b9..2e76b305b7 100644
--- a/types/react-fontawesome/index.d.ts
+++ b/types/react-fontawesome/index.d.ts
@@ -1,8 +1,9 @@
 // Type definitions for react-fontawesome 1.6
 // Project: https://github.com/danawoodman/react-fontawesome
-// Definitions by: Timur Rustamov <https://github.com/timurrustamov>,
+// Definitions by: Timur Rustamov <https://github.com/timurrustamov>
 //                 Anton Kandybo <https://github.com/dublicator>
 //                 Vincas Stonys <https://github.com/vincaslt>
+//                 Gavin Gregory <https://github.com/gavingregory>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
@@ -12,13 +13,12 @@ export = FontAwesome;
 
 declare namespace FontAwesome {
     type FontAwesomeSize = 'lg' | '2x' | '3x' | '4x' | '5x';
-    type FontAwesomeStack = "1x" | "2x";
-    type FontAwesomeFlip = "horizontal" | "vertical";
+    type FontAwesomeStack = '1x' | '2x';
+    type FontAwesomeFlip = 'horizontal' | 'vertical';
 
-    interface FontAwesomeProps {
+    type FontAwesomeProps = React.HTMLProps<FontAwesome> | {
         ariaLabel?: string;
         border?: boolean;
-        className?: string;
         cssModule?: any;
         fixedWidth?: boolean;
         flip?: FontAwesomeFlip;
@@ -30,7 +30,7 @@ declare namespace FontAwesome {
         spin?: boolean;
         stack?: FontAwesomeStack;
         tag?: string;
-    }
+    };
 }
 
 declare class FontAwesome extends React.Component<FontAwesome.FontAwesomeProps> {}
diff --git a/types/react-fontawesome/react-fontawesome-tests.tsx b/types/react-fontawesome/react-fontawesome-tests.tsx
index 6c0b51fab7..5b6b8a7a8c 100644
--- a/types/react-fontawesome/react-fontawesome-tests.tsx
+++ b/types/react-fontawesome/react-fontawesome-tests.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import FontAwesome = require('react-fontawesome');
 
-class TestComponent extends React.Component {
+class BasicTestComponent extends React.Component {
   render() {
     return (
       <FontAwesome
@@ -14,3 +14,14 @@ class TestComponent extends React.Component {
     );
   }
 }
+
+class CSSTestComponent extends React.Component {
+  render() {
+    return (
+      <FontAwesome
+        name="rocket"
+        style={{backgroundColor: 'red', color: 'blue'}}
+      />
+    );
+  }
+}