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

November 4, 2019 at 3:47pm
  • reply
  • like

November 10, 2019 at 8:00am
Hi guys, has anyone customized or made a custom css function that does extra things besides what styled-components provides? I want to do that but I can't find any example. Cheers
  • reply
  • like

November 15, 2019 at 2:30pm
Im interested of how your theme objects look like ours look like this:
export default merge(
{},
{
responsiveProps: {
breakpoints: BREAKPOINTS,
},
login: {
animationBackground: false,
buttonBorder: white,
linkColor: white,
hover: {
color: white,
background: blue.light,
buttonBorder: 'transparent',
},
},
primary: blue.light,
background: '#F9F9F9',
text: grey.xdark,
textDisabled: grey.light,
infoColor: blue.light,
errorColor: red.base,
warningColor: yellow.base,
successColor: green.base,
backgroundHoverColorDefault: grey.xxlight,
inputBorderRadius: INPUT_BORDER_RADIUS,
icon: {
fleetIcon: 'fleet',
},
userMenu: {
iconColor: blue.light,
},
linkColor: {
text: blue.light,
underline: 'none',
hover: green.base,
hoverUnderline: 'none',
},
cardLabel: {
base: grey.xdark,
},
iconColor: {
base: grey.xdark,
},
borderColor: {
light: grey.xlight,
base: grey.base,
},
borderRadius: '3px',
backgroundColor: {
white: {
background: white,
color: grey.xdark,
},
blue: {
background: blue.light,
color: white,
},
green: {
background: green.dark,
color: white,
},
red: {
background: red.base,
color: white,
},
xxlight: {
background: grey.xxlight,
color: grey.xdark,
},
xlight: {
background: grey.xlight,
color: grey.xdark,
},
light: {
background: grey.light,
color: grey.xdark,
},
dark: {
background: grey.xdark,
color: white,
},
xdark: {
background: grey.xdark,
color: white,
},
xxdark: {
background: grey.xxdark,
color: white,
},
},
whiteSpace: {
xsmall,
small,
medium,
large,
},
distance: {
xsmall,
small,
medium,
large,
},
transition,
colors,
pageBrand,
topBarBrand,
},
componentThemes,
);
How does your structure look like?
  • reply
  • like
Yeah, we keep running into issues with it as well. It's starting to feel like this sort of feature will need to be fundamentally built into styled-components itself...
  • reply
  • like

November 17, 2019 at 7:30pm
Yeah, we keep running into issues with it as well. It's starting to feel like this sort of feature will need to be fundamentally built into styled-components itself...
FYI et al, I pushed a PR to babel-plugin-styled-components-css-namespace today which seems to resolve a large class of errors we've encountered: https://github.com/QuickBase/babel-plugin-styled-components-css-namespace/pull/50 - feel free to comment there (or upvote if it also helps you).
  • reply
  • like

November 29, 2019 at 2:16pm
Hi anyone there ?
  • reply
  • like
nope
  • reply
  • like

December 8, 2019 at 1:45pm
How did you guy do responsiveness with styled-components?
  • reply
  • like
How did you guy do responsiveness with styled-components?
What do you mean by responsiveness?
  • reply
  • like

December 8, 2019 at 10:34pm
Im not able to post oin the channels :( ?
  • reply
  • like
I get internal server error
  • reply
  • like

December 16, 2019 at 4:11pm
Hi everyone!
I’m trying to pick a CSS-in-JS solution for my app and I’m having a hard time picking between Emotion and Styled components. Can you please help me understand why I would want one over the other?
Also are there any comprehensive video courses or tutorials that covers all of the Emotion features? I have found the resources for styled components to be much easier to find, so it’s been hard to compare.
  • reply
  • like

January 22, 2020 at 3:02pm
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?
  • reply
  • like

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

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