Question about styled-components

[flavio-ever]

Hello good afternoon. Sorry for my English.

I didn't find it in the documentation, and in some examples I see out there, they end up resulting in a syntax or typing error. I'm experimenting on nextjs, everything is set up fine (I think).

Example:
If I use "css" in the element, it triggers a typing error, pointing out that it doesn't exist and so on. I saw mentions of changing the "jsxImportSource" in the typescript, but as I'm using styled-components, I wasn't successful.

Example:
Is it okay to do it this way?

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

export const App = styled.div`
  ${tw`flex justify-center items-center h-screen`}
`

I see many articles about importing "styled" straight from the "twin.macro" module but apparently I didn't find anything inside. Maybe they've removed it, or need something else I don't know yet.

[ben-rogerson]

You can import styled but may run into some issues - the safe way is to import styled through twin.

Here's how I'd change your example:

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

export const App = tw.div`flex justify-center items-center h-screen`

The styled import works great in the following typescript twin examples, could you let me know where you saw the broken implementation of styled?

• snowpack-react-styled-components-typescript
• storybook-styled-components-typescript
• vite-styled-components-typescript
• webpack-styled-components-typescript

[flavio-ever]

I found this year 2020 pull

#78

[flavio-ever]

I found this year 2020 issue
#77

[flavio-ever]

I ended up defining this paleative solution .\@types\twin.d.ts

import 'twin.macro'
import styled, { css } from 'styled-components'
declare module 'twin.macro' {
  export { css, styled }
}

Any predictions to fix or update the documentation?

[ben-rogerson]

Check the types/twin.d.ts files in those repos I posted above for the full set of types.

Here's the contents from one of them:

// types/twin.d.ts
import 'twin.macro'
import styledImport, { CSSProp, css as cssImport } from 'styled-components'

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport
  const css: typeof cssImport
}

declare module 'react' {
  // The css prop
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: CSSProp
  }
  // The inline svg css prop
  interface SVGProps<T> extends SVGProps<SVGSVGElement> {
    css?: CSSProp
  }
}

// The 'as' prop on styled components
declare global {
  namespace JSX {
    interface IntrinsicAttributes<T> extends DOMAttributes<T> {
      as?: string
    }
  }
}

You're right about the documentation on those styled-components examples - they definitely need some work!

They need new readme's, added in the same format as the react-emotion-typescript readme.
I understand this is a large job, but I'd really appreciate even one of the examples being updated if you have any capacity 👍

[flavio-ever]

I thank you for your feedback, I do hope to be able to contribute in the future, even if a little. I really like the work!

[trepechov-lime]

I've recently hit some issue with the types/twin.d.ts

I'm using headless ui so I had to extend the

interface IntrinsicAttributes<T> extends DOMAttributes<T> {
    as?: string | Element | ExoticComponent
}

to support as={Fragment} but it introduces ts error on all Headless ui components (<Menu.Button>, <Dialog.Title> etc) with as property