search

solidjs / solid-styled-components

A 1kb Styled Components library for Solid
MIT License
280 stars 26 forks source link

Target/refer other components? #24

Closed diragb closed 2 years ago

diragb commented 2 years ago

This works with styled-components:

import styled from 'styled-components'

const Button = styled.div``

const Wrapper = styled.div`
  &:hover ${Button} {
    display: none;
  }
`

But not with solid-styled-components:

Argument of type '((props: HTMLAttributes<HTMLDivElement>) => Element) & { class: (props: HTMLAttributes<HTMLDivElement>) => string; }' is not assignable to parameter of type 'string | number | ((props: HTMLAttributes<HTMLDivElement> & { theme?: DefaultTheme | undefined; as?: string | number | symbol | undefined; class?: any; children?: any; }) => string | ... 2 more ... | undefined)'.
  Type '((props: HTMLAttributes<HTMLDivElement>) => Element) & { class: (props: HTMLAttributes<HTMLDivElement>) => string; }' is not assignable to type '(props: HTMLAttributes<HTMLDivElement> & { theme?: DefaultTheme | undefined; as?: string | number | symbol | undefined; class?: any; children?: any; }) => string | ... 2 more ... | undefined'.
    Type 'Element' is not assignable to type 'string | number | CSSAttribute | undefined'.
      Type 'null' is not assignable to type 'string | number | CSSAttribute | undefined'.ts(2345)

Are there any plans to support this feature? And is there any workaround for this at the moment?

Read more: https://styled-components.com/docs/advanced#referring-to-other-components

diragb commented 2 years ago

Never mind, just found the relevant section in the doc: https://www.npmjs.com/package/solid-styled-components#nesting-styled-components

Great work!