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:10pm
I've only had to do that once maybe. I think when referencing another styled-component via
${SomeComponent}: { ...etc }
  • reply
  • like
Oh i thought you were saying the double && wasnt working
  • reply
  • like
Interesting, not sure if they handle prioritization overrides if passing an object. The TS source may have some insight
Edited
  • reply
  • like
I dont know typescript well enough to really grok this, but i'm sure it's in there somewhere : https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-components/index.d.ts
Edited
  • reply
  • like
Semi-related question regarding specificity - we're shipping a design system / component library built with styled-components. There are (known, internal) scenarios where, when rendering components from this library in an existing application with its own CSS, the existing CSS overrides the component library CSS. And the app's CSS uses ID selectors in some places, making it impossible to override using the &&& approach.
  • reply
  • like
We've experimented with https://github.com/QuickBase/babel-plugin-styled-components-css-namespace and while yes it works for this specific case, we'd like to not dictate the need for a wrapper container around the component library components with some specific ID tag or whatever. Instead, we'd like to make this a runtime concern.
like-fill
1
  • reply
  • like
So, the specific question: does anybody have any strategies for applying a CSS namespace to all the CSS generated in a library at runtime (instead of using a build-time babel plugin)?
  • reply
  • like
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