Added styling props to Typography

Author: NatLeung96

src/ui/widgets/Label/label.tsx

@@ -1,7 +1,6 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 
-import classes from "./label.module.css";
-import { Widget, commonCss } from "../widget";
+import { Widget } from "../widget";
 import { WidgetPropType } from "../widgetProps";
 import { registerWidget } from "../register";
 import {
@@ -43,11 +42,9 @@ export const LabelComponent = (
   props: InferWidgetProps<typeof LabelProps>
 ): JSX.Element => {
   // Default labels to transparent.
-  const editedProps = {
-    ...props,
-    transparent: props.transparent ?? true
-  };
-  const style: CSSProperties = commonCss(editedProps);
+
+  const transparent = props.transparent ?? true;
+
   const {
     textAlign = "left",
     textAlignV = "top",
@@ -60,49 +57,45 @@ export const LabelComponent = (
   let alignment = "center";
   if (textAlign === "left") {
     alignment = "flex-start";
-    if (wrapWords) {
-      style["textAlign"] = "left";
-    }
   } else if (textAlign === "right") {
     alignment = "flex-end";
-    if (wrapWords) {
-      style["textAlign"] = "right";
-    }
-  } else {
-    if (wrapWords) {
-      style["textAlign"] = "center";
-    }
   }
-  style["justifyContent"] = alignment;
-  style["cursor"] = "default";
+
   let alignmentV = "center";
   if (textAlignV === "top") {
     alignmentV = "flex-start";
   } else if (textAlignV === "bottom") {
     alignmentV = "flex-end";
   }
-  style["alignItems"] = alignmentV;
+
   let transform = undefined;
   if (rotationAngle) {
     transform = `rotate(${rotationAngle}deg)`;
   }
 
-  if (wrapWords) {
-    style["wordBreak"] = "break-word";
-    style["whiteSpace"] = "break-spaces";
-  }
-
   // Simple component to display text - defaults to black text and dark grey background
   return (
     <ThemeProvider theme={defaultColours}>
       <Typography
+        noWrap={!wrapWords}
         sx={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: alignment,
+          alignItems: alignmentV,
+          textAlign: textAlign,
+          wordBreak: wrapWords ? "break-word" : null,
+          whiteSpace: wrapWords ? "break-spaces" : null,
           color:
             props.foregroundColor?.toString() ??
             defaultColours.palette.primary.contrastText,
+          backgroundColor: transparent
+            ? null
+            : (props.backgroundColor?.toString() ??
+              defaultColours.palette.primary.main),
           fontFamily: props.font?.css() ?? null,
-          transform: transform?.toString() ?? null,
-          border: "2px"
+          transform: transform?.toString() ?? null
         }}
       >
         {text}