How to use Variant property for button

[Anishali2]

I'm working on my project and I want to use the variant property for buttons like this one and I am using version "^3.0.1",

import tw from 'twin.macro';
const Button = tw.button`text-center px-10 py-2 rounded-main bg-primary text-white shadow ` 

<Button variant="primary">Submit</Button>
I try to find everywhere and didn't find any right solution. I know I can create a component with props and pass children but I want to know if I can do this with version 3.0.1

[ben-rogerson]

You'll want to read the styled component guide but here's a simple solution:

import tw, { styled } from 'twin.macro'

const Button = styled.button(({ variant }) => [
  tw`text-center px-10 py-2 rounded-main bg-primary text-white shadow`,
  variant && tw`bg-black`, // Add variant styles
])

[QiuYeDx]

How do I pass in a tw style as a parameter? For example, I want to create a component like this:
<Button tw_bg="bg-blue-200">Submit</Button>

The reason for using it this way is that, for some reason, using tw="bg-blue-200" in a jsx component doesn't work.

[ben-rogerson]

Once you've setup twin you can use the tw prop (tw="bg-blue-200") by either:

1. Adding an import at the top of the file: import "twin.macro"
2. Using babel-plugin-twin to avoid having to add the import

If you want to pass it as a parameter you'll need to do the conversion at the time of passing it into your component:

import tw, { styled } from 'twin.macro'

<Button customStyles={tw`bg-blue-200`}>...</Button>;

const Button = styled.button(({ customStyles }) => [
  customStyles,
  tw`bg-black`, // Base styles
])

I don't recommend doing this as your styling will be much cleaner if they're defined within your component instead of getting passed into it. Refer to the variant example in the previous comment on what I mean here.

[Anishali2]

From the latest version of twin.macro styled is not importing how can I fix that issue

[ben-rogerson]

Please add a new issue/discussion and provide some information about your project setup so I can help.
Otherwise please compare your setup with one of the examples to see what's missing.

[Anishali2]

Ok Creating a new Issue

[Anishali2]

#797
Please guide me