From a113c99f997e1f97f0ec4de4c4197cf93202ec00 Mon Sep 17 00:00:00 2001 From: Mark Lawlor Date: Wed, 20 Jul 2022 08:37:48 -0300 Subject: [PATCH] docs: small fixes to custom components --- apps/website/docs/guides/custom-components.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/website/docs/guides/custom-components.mdx b/apps/website/docs/guides/custom-components.mdx index ae3f6b0..1db5ba0 100644 --- a/apps/website/docs/guides/custom-components.mdx +++ b/apps/website/docs/guides/custom-components.mdx @@ -1,6 +1,6 @@ # Custom Components -NativeWind strength really shines with writing your own custom components. +NativeWind's strength really shines with writing your own custom components. ## Merging styles @@ -47,7 +47,7 @@ function MyComponent({ style }) { ## Passing styles to components -When passing styles between components, they are compiled on the parent and passed as a styles object to the child. +When passing styles between components, they are compiled on the parent and passed as a `style` prop to the child. ```tsx function A({ style }) { @@ -60,7 +60,7 @@ function B({ style }) { } ``` -If you want to pass the className as a string, simply use a different prop +If you want to pass the className as a string use a different prop. ```tsx function A({ style }) { @@ -72,7 +72,7 @@ function B({ textClassName }) { } ``` -Don't worry about inline-styles, they will be merged +Inline styles will be merged ```tsx function A({ style }) { @@ -80,7 +80,7 @@ function A({ style }) { } function B({ style }) { - // style is { fontWeight: "bold", color: "black" } + // style is [{ fontWeight: "bold" }, { color: "black" }] return ; } ```