Skip to main content

styled()

Usage​

styled() is a Higher-Order Component 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 are no differences between tw and className.

Default styles​

styled() can be used similar to Styled Components, and provide base styling.

Styling multiple properties​

styled() can optionally accept a list of additional props to parse into runtime styles.

function Wrapper({ innerStyle, children, ...props }) {
  return (
    <View {...props}>
      <View style={innerStyle}>
        { children }
      </View>
    </View>
  )
}

const StyledWrapper = styled(Wrapper, {
  props: {
    innerStyle: true
  }
})

<StyledWrapper className="h-4" innerStyle="p-4"><Text>Hello, World!</Text></StyledWrapper>

Mixing between inline props and CSS classes​

Some components can either accept a value as a prop or be styled by CSS. An example is react-native-svg which provides as fill prop, but on web can also accept a class providing fill styling.

You can flag a components props as classProps to ensure the best output is used.

import { styled } from "nativewind";
import { Svg, Rect } from "react-native-svg";

const StyledRect = styled(Rect, {
  classProps: ["fill", "stroke"],
});

function MyStyledSvg({ fill, stroke, ...props }) {
  return (
    <Svg height="100" width="100" {...props}>
      <StyledRect
        x="0"
        y="0"
        width="100"
        height="100"
        fill={fill}
        stroke={stroke}
      />
    </Svg>
  );
}

<MyStyledSvg fill="fill-black" stroke="stroke-2 stroke-blue-500" />;

Styling non-style properties​

danger

Mapping non-style props will not work when outputting CSS. If you need a theme value (e.g. color) consider importing theme values instead.

styled() can also accept a object which maps style properties to component properties.

const StyledWrapper = styled(Wrapper, {
  props: {
    placeholderTextColor: "color",
  },
});