profile page
@@ -21,6 +23,8 @@ export const ProfilePage = () => {
+
+
{JSON.stringify(params as Required, null, 4)}
);
};
diff --git a/tags.js b/tags.js
new file mode 100644
index 0000000..c775bab
--- /dev/null
+++ b/tags.js
@@ -0,0 +1,28 @@
+const makeStyles = (theme) => (body, ...expressions) => {
+ console.log(body, expressions);
+ return body.reduce((acc, cur, index) => {
+ const expression = expressions[index];
+
+ if (typeof expression === "function") {
+ cur += expression(theme);
+ } else if (expression) {
+ cur += expression;
+ }
+
+ acc += cur;
+
+ return acc;
+ }, "");
+};
+
+let condition = false;
+
+const css = makeStyles({ colors: { main: 'red', notmain: 'green' } })
+
+const styles = css`
+ width: 100%;
+ color: ${condition ? "red" : "green"};
+ background-color: ${(theme) => condition ? theme.colors.main : theme.colors.notmain};
+`;
+
+console.log("styles", styles);
diff --git a/types/emotion.d.ts b/types/emotion.d.ts
new file mode 100644
index 0000000..820506a
--- /dev/null
+++ b/types/emotion.d.ts
@@ -0,0 +1,9 @@
+import '@emotion/react'
+
+declare module '@emotion/react' {
+ export interface Theme {
+ colors: {
+ main: string
+ }
+ }
+}