menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team
Posts
Chat
Members
Info
Show previous messages

January 25, 2020 at 4:47pm
  • reply
  • like

January 27, 2020 at 7:17am
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
  • reply
  • like

February 12, 2020 at 5:54am
How did you guy do responsiveness with styled-components?
Do you mean that how we write media queries with styled-components?
  • reply
  • like

February 19, 2020 at 7:21pm
How to use : not( :last-child) in styled components
  • reply
  • like

February 21, 2020 at 7:04am
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
}
`;
  • reply
  • like

March 5, 2020 at 7:05pm
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 */ }
  • reply
  • like

March 16, 2020 at 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.
  • reply
  • like

March 17, 2020 at 3:21am
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.
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
  • reply
  • like

April 16, 2020 at 3:28pm
hey guys! do you know is there's already an embeddable live theme editor for system ui?
  • reply
  • like
I see there's something like that for themeUI but I found nothing for systemUI
  • reply
  • like

April 19, 2020 at 11:11am
How to use min-device-width and max-device-width media queries simultaneously in styled-components..
  • reply
  • like

May 12, 2020 at 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?
  • reply
  • like

May 13, 2020 at 7:08am
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.
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.
  • reply
  • like
Thanks. Would that work though if I don't pass any props down or something inside AudioPlayer, to its actual root styled element?
  • reply
  • like
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.
  • reply
  • like

May 25, 2020 at 7:10pm
hi. I've got a question. is it possible to use decimal units like 0.3cm or 33.05mm in css ?
  • reply
  • like
Hey, maybe you can try to read this. CSS UNITS
  • reply
  • like

May 26, 2020 at 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?
  • reply
  • like

June 11, 2020 at 4:36pm
How to write style with parent class in styled component
  • reply
  • like

June 25, 2020 at 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
  • reply
  • like

June 26, 2020 at 7:24am
Yes, you need babel plugin for this
Edited
  • reply
  • like

June 30, 2020 at 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
  • reply
  • like