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

styled-components watercooler

November 16, 2017 at 9:01pm
Show previous messages

January 25, 2020 at 4:44pm
I've just upgraded Styled Components to v5 and Jest-Styled-Components to 7.0.0. After running my tests, it seems that the generated snaphots no longer have the outputted CSS properties within them. Is this a known issue?
I've also noticed that the generated HTML classes are no longer .c0 etc, and are now prefixed with .sc-xxxx
Can anyone shed any light on this?
it looks like there are some issues with jest-styled-components v7. I’m wondering if this package is still being maintained / supported with v5. I might see if I have time to do some digging into the code and figure out what’s going on.
  • reply
  • like
we’re having issues with toHaveStyleRule in particular.
  • 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