nebius/SWE-rebench-V2-PRs huggingface dataset:
Repository: marigold-ui/marigold
Pull request #2458 (2022-09-14 11:10:05)

fix: style props override theme in `<Text>`


Patch:
diff --git a/.changeset/chilly-spies-change.md b/.changeset/chilly-spies-change.md
new file mode 100644
index 000000000..a3b91aa69
--- /dev/null
+++ b/.changeset/chilly-spies-change.md
@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+fix: style props override theme in `<Text>`
diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx
index 9ea57d318..9d235ba30 100644
--- a/packages/components/src/Text/Text.tsx
+++ b/packages/components/src/Text/Text.tsx
@@ -48,7 +48,7 @@ export const Text = ({
     <Box
       as="p"
       {...props}
-      css={{ color, cursor, outline, fontSize, textAlign: align, ...styles }}
+      css={[styles, { color, cursor, outline, fontSize, textAlign: align }]}
     >
       {children}
     </Box>


Test patch:
diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx
index d515626ee..1f09b4ca5 100644
--- a/packages/components/src/Text/Text.test.tsx
+++ b/packages/components/src/Text/Text.test.tsx
@@ -24,7 +24,7 @@ const theme = {
       variant: {
         one: {
           fontFamily: 'Arial',
-          color: 'green',
+          color: 'blue',
         },
       },
     },
@@ -42,6 +42,18 @@ test('uses base as default variant', () => {
   expect(text).toHaveStyle(`font-family: Oswald Regular`);
 });
 
+test('uses theme styles', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Text variant="one">text</Text>
+    </ThemeProvider>
+  );
+  const text = screen.getByText(/text/);
+
+  expect(text).toHaveStyle(`font-family: Arial`);
+  expect(text).toHaveStyle(`color: ${theme.colors.blue}`);
+});
+
 test('renders a <p> element by default', () => {
   render(
     <ThemeProvider theme={theme}>
@@ -75,3 +87,17 @@ test.each([
     expect(box).toHaveStyle(style);
   });
 });
+
+test('style props override theme styles', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Text variant="one" color="primary">
+        text
+      </Text>
+    </ThemeProvider>
+  );
+  const text = screen.getByText(/text/);
+
+  expect(text).toHaveStyle(`font-family: Arial`);
+  expect(text).toHaveStyle(`color: ${theme.colors.primary}`);
+});