kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-11 08:03:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update docs for styled

Browse Source
This commit is contained in:
Mark Lawlor
2022-05-19 18:14:15 +10:00
parent d52b6746bf
commit b17e0c9e21
1 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website/docs/api/styled.md
View File

@@ -5,7 +5,7 @@ sidebar_label: styled()
## Usage
`styled` is a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) which allows your component to accept either the `tw` or `className` props. These props are compiled into StyleSheet objects and passed to your component via the `style` prop.
`styled()` is a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) which allows your component to accept either the `tw` or `className` props. These props are compiled into StyleSheet objects and passed to your component via the `style` prop.
There is no difference between `tw` and `className`, but `tw` has priority.
@@ -25,8 +25,22 @@ export function MyComponent() {
}
```
## Advanced usage
## Styling multiple properties
### inheritedClassName
`styled()` can optionally accept a list of additional props to parse into runtime styles.
nthChild,
```
function Wrapper({ innerStyle, children, ...props }) {
return (
<View {...props}>
<View style={innerStyle}>
{ children }
</View>
</View>
)
}
const StyledWrapper = styled(Wrapper, { props: ["innerStyle"] })
<StyledWrapper className="h-4" innerStyle="p-4"><Text>Hello, World!</Text></StyledWrapper>
```