How to pass custom style to component ?

[airman5573]

import tw from 'twin.macro';

type HeaderProps = {
  children: React.ReactNode;
  tw: string;
};
const Header = ({ children, tw: customTw }: HeaderProps) => {
  return (
    <div css={[tw`flex items-center gap-3 px-6 py-2 border-b border-zinc-200 mb-2`, tw`${customTw}`]}>
      {children}
    </div>
  );
}; 

export default Header;

I want to pass custom style to Header.
How to do this ?

[ben-rogerson]

You have two options here.

The styles need to remain with their tw block - they can't be interpolated:

• 👎 tw`${customTw}`
• 👍 tw`block`

So either:

1. Pass the styles via prop, including the tw wrapper: tw`block`
2. Use a normal prop, eg: isBig to conditionally add the style to the array: [isBig && tw`block`]

Some docs for more info:

• The prop styling guide
• The styled component guide

[airman5573]

Thank you :D