How to attach attributes

[jasonkuhrt]

https://styled-components.com/docs/basics#attaching-additional-props

import { styled } from 'twin.macro'

export const TextInput = styled.input.attrs({ type: 'text' })`p-10`

This does not seem to work. No static or runtime errors, yet no effect either (in a Nextjs app context).

[jasonkuhrt]

I found this workaround but it doesn't work with intellisense currently:

import styled from 'styled-components'
import tw from 'twin.macro'

export const TextInput = tw(styled.input.attrs({ type: 'text' })``)`border`

[fvanwijk]

import { styled } from 'twin.macro' does import from styled-components (proxy). So you cannot use border or other twin directives.

This should work:

tw.input.attrs({ type: 'text' })`border`

[jasonkuhrt]

Not quite, at least according to TypeScript:

[ben-rogerson]

Sounds like there's a small hole in the types here - PR's welcome 👍

[jasonkuhrt]

Ah ok!

I'll look into that