diff --git a/src/material/Button.tsx b/src/material/Button.tsx
index 1e08e41..524e378 100644
--- a/src/material/Button.tsx
+++ b/src/material/Button.tsx
@@ -1,5 +1,6 @@
 import { Component, JSX, splitProps } from "solid-js";
 import materialStyles from "./material.module.css";
+import "./typography.css";
 
 /**
  * Material-styled button.
@@ -10,12 +11,15 @@ const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
   props,
 ) => {
   const [managed, passthough] = splitProps(props, ["class", "type"]);
-  const classes = () =>
-    managed.class
-      ? [materialStyles.button, managed.class].join(" ")
-      : materialStyles.button;
   const type = () => managed.type ?? "button";
-  return <button type={type()} class={classes()} {...passthough}></button>;
+
+  return (
+    <button
+      type={type()}
+      class={`${materialStyles.button} buttonText ${managed.class || ""}`}
+      {...passthough}
+    ></button>
+  );
 };
 
 export default Button;
diff --git a/src/material/material.module.css b/src/material/material.module.css
index 3443756..18d8fc8 100644
--- a/src/material/material.module.css
+++ b/src/material/material.module.css
@@ -10,7 +10,6 @@
 }
 
 .button {
-  composes: buttonText from "./typography.module.css";
   composes: touchTarget;
 
   border: none;
diff --git a/src/material/typography.module.css b/src/material/typography.css
similarity index 95%
rename from src/material/typography.module.css
rename to src/material/typography.css
index 4606687..2e1c9af 100644
--- a/src/material/typography.module.css
+++ b/src/material/typography.css
@@ -29,12 +29,11 @@
   font-size: var(--subheading-size);
 }
 
-.body1 {
+.body1, .body2 {
   font-size: var(--body-size);
 }
 
 .body2 {
-  composes: body1;
   font-weight: var(--body2-weight);
 }
 
diff --git a/src/material/typography.tsx b/src/material/typography.tsx
index 2ea0fd3..40f690d 100644
--- a/src/material/typography.tsx
+++ b/src/material/typography.tsx
@@ -1,7 +1,6 @@
 import { JSX, ParentComponent, splitProps, type Ref } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import typography from "./typography.module.css";
-import { mergeClass } from "../utils";
+import "./typography.css";
 
 type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
 
@@ -40,13 +39,11 @@ export function Typography<T extends AnyElement>(
     "class",
     "typography",
   ]);
-  const classes = () =>
-    mergeClass(managed.class, typography[managed.typography]);
   return (
     <Dynamic
       ref={managed.ref}
       component={managed.component ?? "span"}
-      class={classes()}
+      class={`${managed.class} ${managed.typography}`}
       {...passthough}
     ></Dynamic>
   );