# Custom Components

NativeWind's strength really shines with writing your own custom components.

## Passing styles to components

When passing styles between components, they are compiled on the parent and passed as a `style` prop to the child.

```tsx
function MyComponent({ style }) {
  // You need to use style, className is not passed down!
  return <Text style={style} />;
}

<MyComponent className="font-bold" />
```

If you want to pass the className as a string use a different prop.

```tsx
function A({ style }) {
  return <B textClassName="font-bold" />;
}

function B({ textClassName }) {
  return <Text className={textClassName} />;
}
```

## Merging styles

NativeWind doesn't require you to merge or provide styles as an array. You can simply append the two classNames strings together

```tsx
function MyComponent() {
  const classes = `text-black`;
  return <Text className={`font-bold ${classes}`} />;
}
```

This pattern is very useful for creating components with variants

```tsx
const variantStyles = {
  default: "rounded",
  primary: "bg-blue-500 text-white",
  secondary: "bg-white-500 text-black",
};

function MyComponent({ variant }) {
  return (
    <Text
      className={`
      font-bold
      ${variantStyles.default}
      ${variantStyles[variant]}
    `}
    />
  );
}
```

## Merging with inline styles

NativeWind will automatically merge with inline-styles. Inline styles have a higher priority.

```tsx
function MyText({ style }) {
  // style is [{ fontWeight: "bold" }, { color: "black" }]
  return <Text style={style} />;
}

<MyText className={`font-bold`} style={{ color: "black" }} />;
```

## Typescript

`styled()` handles the Typescript complexity for you. Simply write your components as normal.

```tsx
interface MyButtonProps extends PressableProps {
  textStyle: TextProps["style"]
}

function MyButton({ textStyle, children, ...props }: MyButtonProps) {
  return (
    <Pressable {...props}>
      <Text style={textStyle}>{children}</Text>
    </Pressable>
  )
}

export default styled(MyButton, {
  props: {
    textStyle: true
  }
})

<MyButton textStyle="font-bold">This text will be bold</MyButton>



```

## Complex logic

If you have complex styling logic consider using a library the className merging like [clsx](https://www.npmjs.com/package/clsx).

```tsx
function A({ rounded, className }) {
  const className = clsx(
    "font-bold",
    { rounded },
    variant === "primary" && "bg-blue-500 text-white",
    variant === "secondary" && "bg-blue-500 text-white",
    className
  );
  return <B className={className} />;
}
```
