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

October 8, 2019 at 3:27pm
Maybe based on some process.env variable, or any other strategy.
  • reply
  • like

November 1, 2019 at 7:12am
Are env variables supported in styled-components? I was trying to utilise inset ones to style around iPhone's notch, but following doesn't work, nor does it fall back to those 40px
const Header = styled.header`
padding-top: env(safe-area-inset-top, 40px);
`;
  • reply
  • like
normal padding-top: 40px; works as expected
  • reply
  • like

November 1, 2019 at 2:43pm
are you working in react-native or just in the browser?
  • reply
  • like

November 4, 2019 at 1:18pm
Hey guys, does anyone know are there any approaches to increase the CSS specificity for the whole project? Something like &&&, but for the whole styles in project by default.
  • reply
  • like
I see that 's answer can help!
  • reply
  • like
  • 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