fix(component): fix types and props name

fix types with extends BaseStyleProp and adding classes to the props list

resolves #39

Signed-off-by: Niloy Sikdar <niloysikdar30@gmail.com>

src/components/Email/Email.stories.tsx

@@ -23,8 +23,8 @@ Default.args = {
       </tbody>
     </table>
   ),
-  styles: {
-    email: {
+  classes: {
+    root: {
       backgroundColor: 'gray',
       color: 'white',
     },

src/components/Email/Email.tsx

@@ -1,24 +1,25 @@
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { BaseStyleProp } from '../types';
 import { makeStyles } from '../../utils/makeStyles';
 
-export interface EmailProps {
+type EmailStyles = 'root';
+
+export interface EmailProps extends BaseStyleProp<EmailStyles> {
   children?: ReactNode;
-  className?: string;
-  styles?: Record<'email', CSSProperties>;
 }
 
 const useStyles = makeStyles({
-  email: {
+  root: {
     margin: '0px auto',
     maxWidth: '600px',
   },
 });
 
-export const Email = ({ children, className, styles }: EmailProps): JSX.Element => {
-  const style = useStyles({ classes: styles });
+export const Email = ({ children, className, classes }: EmailProps): JSX.Element => {
+  const styles = useStyles({ classes });
 
   return (
-    <div style={style.email} className={className}>
+    <div style={styles.root} className={className}>
       {children}
     </div>
   );