styled-components

Truth be told, I haven't come across a nested SC being extended by styled(), so I wouldn't know. My best guess is that you'd have to pass such a prop explicitly.

May 25, 2020 at 7:10pm

kle-dev@kle-dev

7:10pm

hi. I've got a question. is it possible to use decimal units like 0.3cm or 33.05mm in css ?

Hoe Hooi Yan@hooiyan

1:09am

Hey, maybe you can try to read this. CSS UNITS

May 26, 2020 at 6:47pm

Joe Theis@joe-theis

6:47pm

Trying to get some help with https://github.com/styled-components/styled-components/issues/3137. This seems like an important regression from v3 to v4/5. Is there some accepted workaround people are using?

June 11, 2020 at 4:36pm

Selva@selva-graphic

4:36pm

How to write style with parent class in styled component

ambertino@ambertino

10:21pm

@selva-graphic

something like this?

Edited

10:46pm

June 25, 2020 at 2:43am

Aryan sahu@aryan-sahu

2:43am

I want to set some prefix in class name generated by styled-component. Like instead for this sc-AxirZ I want like style__ContainerWrapper-sc-AxirZ , is this possible?

Edited

June 26, 2020 at 7:24am

ambertino@ambertino

7:24am

@aryan-sahu

Yes, you need babel plugin for this

Edited

7:25am

https://styled-components.com/docs/tooling#better-debugging

June 30, 2020 at 7:31am

Arpit@tipra34

7:31am

which one will have more specificity for styles

const Label = styled.div`
     color: blue;
`
const InputWrapper = styled.div`
    & .Label: {
       color: green;
    }
`
const Container = styled.div`
    & .Label: {
       color: red;
    }
`
<Container>
   <InputWrapper>
     <Label className="Label">some text</Label>
     <input />
   </InputWrapper>
</Container>

Edited

July 28, 2020 at 10:17am

luis-guerra@luis-guerra

10:17am

Moved to #help

Edited

September 6, 2020 at 8:57pm

glarget@kensou

8:57pm

Hello, I need your help please. I work with styled system with styled components and I don't understand how shouldForwardProp works

8:58pm

https://www.npmjs.com/package/@styled-system-ts/should-forward-prop

8:58pm

what is it supposed to do ? Forwarding props ok but I don't understand it

September 14, 2020 at 12:29pm

Andrés Cortés@cortesa

12:29pm

hi all, i'm new here, but with Q's, :)

12:31pm

I'm using Gatsby with Styled-components and theming but the props defined in theme obj are under props.theme.default[''], and in all doc I saw they are under props.theme['']

12:31pm

any help or idea to correct it, thanks

September 17, 2020 at 6:35pm

clu@clu7

6:35pm

Hi all, qq here. Is this the expected way to type your props in typescript to get a theme to pass through?

import styled, { DefaultTheme, ThemeProps } from 'styled-components';
interface MyProps extends ThemeProps<DefaultTheme> {
  isActive?: boolean;
}
const MyComponent = styled.div<MyProps>((props: MyProps) => {
  return {
   color: props.theme.primary,
    "::before": { .. }
  }
}

September 19, 2020 at 1:18pm

Kevin Bost@kevbost

1:18pm

Are you receiving any feedback from typescript, or not receiving tooling that you are expecting?

clu@clu7

4:12pm

With the above code Typescript is fine. I'm saying without extends ThemeProps, then Typescript will show a squiggly line under primary in props.theme.primary.

4:12pm

I'm just wondering if anyone else here is using Typescript with styled-components and if this ^ is how they're handling this case.

September 20, 2020 at 3:34am

Kevin Bost@kevbost

3:34am

So DefaultTheme is typed as {}. Here's what their d.ts says:

/**
 * This interface can be augmented by users to add types to `styled-components`' default theme
 * without needing to reexport `ThemedStyledComponentsModule`.
 */
// ...
export interface DefaultTheme {}

You'll want to build a type for your theme object that extends DefaultTheme and pass that instead

Edited

Sam@i-was-like

6:17am

Hi guys. Is there a way to access global styles from within a component. This is possible in other frameworks using :global()

I am trying to achieve the following:

const Foo = styled.div`
background-image: URL(/image.webp);
:global(html.no-webp) {
background-image: URL(/image.jpg);
}
`

Edited

September 20, 2020 at 9:06pm

clu@clu7

9:06pm

Kevin Bost@kevbost

So DefaultTheme is typed as {}. Here's what their d.ts says:

/**
 * This interface can be augmented by users to add types to `styled-components`' default theme
 * without needing to reexport `ThemedStyledComponentsModule`.
 */
// ...
export interface DefaultTheme {}

You'll want to build a type for your theme object that extends DefaultTheme and pass that instead

Yup, already doing that as described here: https://dev.to/rajuashok/create-styled-d-ts-to-make-typescript-work-with-styled-components-5dk4. Cool thx!