Update apps/docs/docs/learn/06-recipes/02-variants.mdx

Co-authored-by: Naman Goel <[email protected]>
facebook · Dec 5, 2024 · d3579d1 · d3579d1
1 parent 50114b4
commit d3579d1
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/apps/docs/docs/learn/06-recipes/02-variants.mdx b/apps/docs/docs/learn/06-recipes/02-variants.mdx
@@ -21,6 +21,13 @@ Here’s how you can create a button component with different visual styles base
 import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
+  base: {
+    appearance: 'none',
+    borderWidth: 0,
+  },
+});
+
+const variants = stylex.create({
   primary: {
     backgroundColor: {
       default: 'blue',
@@ -38,7 +45,7 @@ const styles = stylex.create({
 });
 
 function Button({ variant = 'primary', ...props }) {
-  return <button {...props} {...stylex.props(styles[variant], props.style)} />;
+  return <button {...props} {...stylex.props(styles.base, variants[variant], props.style)} />;
 }
 
 // Usage