styled-components

Thanks for getting back to me. Yeah, it does seem like there are a few issues sill, which is a shame as I'd like to reap the benefits of upgrading Styled Components to v5

February 12, 2020 at 5:54am

Hoe Hooi Yan@hooiyan

5:54am

Tim Tawan@tawan

How did you guy do responsiveness with styled-components?

Do you mean that how we write media queries with styled-components?

February 19, 2020 at 7:21pm

sbhasker420@sbhasker420

7:21pm

How to use : not( :last-child) in styled components

February 21, 2020 at 7:04am

Hoe Hooi Yan@hooiyan

7:04am

sbhasker420@sbhasker420

How to use : not( :last-child) in styled components

export const StyledComponent= styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  &:last-child {
    // code here
  }
`;

March 5, 2020 at 7:05pm

Dan Lynch@pyramation

7:05pm

Hoe Hooi Yan@hooiyan

export const StyledComponent= styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  &:last-child {
    // code here
  }
`;

what if you wanted to scope your last-child to a type that is another styled-component? e.g., .generatedClassName:last-child { /* rules */ }

March 16, 2020 at 11:06am

Bar Ziony@bartzy

11:06am

Hey, what's the preferred way to have a component that is already styled? Let's say I have an AudioPlayer component. It doesn't make sense for it to not be styled. but having an AudioPlayer and an StyledAudioPlayer components feels a bit verbose and hacky.

March 17, 2020 at 3:21am

ambertino@ambertino

3:21am

Bar Ziony@bartzy

That's how I do it at the moment. Ultimately it seems like you either need to wrap it with styled() or provide css prop

April 16, 2020 at 3:28pm

Luca Campli@luca-campli

3:28pm

hey guys! do you know is there's already an embeddable live theme editor for system ui?

3:29pm

I see there's something like that for themeUI but I found nothing for systemUI

April 19, 2020 at 11:11am

gurudeep shrotriya@gurudeep-shrotriya

11:11am

How to use min-device-width and max-device-width media queries simultaneously in styled-components..

May 12, 2020 at 9:47am

Mohaimin Islam@mohaimin

9:47am

Stuck with an issue. The style tag generated by Styled components is loading ahead of another library's(Ant Design) css. Any way to make sure that the styled component's css loads last in head tag?

May 13, 2020 at 7:08am

Sai Chimata@sai-chai

7:08am

Bar Ziony@bartzy

@ambertino

hinted at the solution. styled() is just an HOC, similar to withTheme, so if you write an AudioPlayer component in its own file, you can add export default styled(AudioPlayer) and treat that default export as if it's named AudioPlayer.

Bar Ziony@bartzy

7:11am

@sai-chai

Thanks. Would that work though if I don't pass any props down or something inside AudioPlayer, to its actual root styled element?

Sai Chimata@sai-chai

7:20am

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