mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-15 02:09:06 +08:00
121 lines
2.5 KiB
Plaintext
121 lines
2.5 KiB
Plaintext
# 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} />;
|
|
}
|
|
```
|