refactor css property type definitions and add types to style props

Author: berkinanik

README.md

@@ -63,34 +63,34 @@ To learn how to use react-papaparse:
 
 ![basic-upload](https://react-papaparse.github.io/static/images/csvreader1.png)
 
-```javascript
-import React, { CSSProperties } from 'react';
+```typescript
+import React from 'react';
 
 import { useCSVReader } from 'react-papaparse';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   csvReader: {
     display: 'flex',
     flexDirection: 'row',
     marginBottom: 10,
-  } as CSSProperties,
+  },
   browseFile: {
     width: '20%',
-  } as CSSProperties,
+  },
   acceptedFile: {
     border: '1px solid #ccc',
     height: 45,
     lineHeight: 2.5,
     paddingLeft: 10,
     width: '80%',
-  } as CSSProperties,
+  },
   remove: {
     borderRadius: 0,
     padding: '0 20px',
-  } as CSSProperties,
+  },
   progressBarBackgroundColor: {
     backgroundColor: 'red',
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -129,8 +129,8 @@ export default function CSVReader() {
 
 ![click-and-drag-upload](https://react-papaparse.github.io/static/images/csvreader2.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -147,7 +147,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -157,7 +157,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -168,47 +168,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -294,8 +294,8 @@ export default function CSVReader() {
 
 ![drag-no-click-upload](https://react-papaparse.github.io/static/images/csvreader3.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -312,7 +312,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -322,7 +322,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -333,47 +333,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -460,8 +460,8 @@ export default function CSVReader() {
 
 ![click-no-drag-upload](https://react-papaparse.github.io/static/images/csvreader4.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -478,7 +478,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -488,7 +488,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -499,47 +499,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {