From 1b33a915c56247599c19c5de04090b776b87d561 Mon Sep 17 00:00:00 2001
From: Kevin Ingersoll <kingersoll@gmail.com>
Date: Thu, 2 Nov 2023 13:40:08 +0000
Subject: [PATCH] fix(create-mud): workaround create-create-app templating
 (#1863)

---
 .changeset/purple-ghosts-hear.md            | 5 +++++
 templates/react/packages/client/src/App.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/purple-ghosts-hear.md

diff --git a/.changeset/purple-ghosts-hear.md b/.changeset/purple-ghosts-hear.md
new file mode 100644
index 0000000000..23bdeb82f6
--- /dev/null
+++ b/.changeset/purple-ghosts-hear.md
@@ -0,0 +1,5 @@
+---
+"create-mud": patch
+---
+
+Fixed an issue when creating a new project from the `react` app, where React's expressions were overlapping with Handlebars expressions (used by our template command).
diff --git a/templates/react/packages/client/src/App.tsx b/templates/react/packages/client/src/App.tsx
index 5c672909d2..4ac69bc4c7 100644
--- a/templates/react/packages/client/src/App.tsx
+++ b/templates/react/packages/client/src/App.tsx
@@ -1,5 +1,7 @@
 import { useMUD } from "./MUDContext";
 
+const styleUnset = { all: "unset" } as const;
+
 export const App = () => {
   const {
     network: { tables, useStore },
@@ -41,7 +43,7 @@ export const App = () => {
                 <button
                   type="button"
                   title="Delete task"
-                  style={{ all: "unset" }}
+                  style={styleUnset}
                   onClick={async (event) => {
                     event.preventDefault();
                     if (!window.confirm("Are you sure you want to delete this task?")) return;
@@ -87,7 +89,7 @@ export const App = () => {
                   }
                 }}
               >
-                <fieldset style={{ all: "unset" }}>
+                <fieldset style={styleUnset}>
                   <input type="text" name="description" />{" "}
                   <button type="submit" title="Add task">
                     Add