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 6, 2019 at 6:57pm
what is the correct way guys
  • reply
  • like

October 7, 2019 at 10:26pm
hey guys
  • reply
  • like
const StyledSnackbarContent = styled(SnackbarContent)` && { background: red; } `;
  • reply
  • like
someone knows how to pass this to object syntax? nothing at google/docs :'(
  • reply
  • like

October 8, 2019 at 12:45pm
Well that's the wrong syntax.
  • reply
  • like
const StyledSnackbarContent = styled(SnackbarContent)`background: red;`
Edited
  • reply
  • like
Actually I think i see what you're trying to do. However I'm not familiar with the && selector
  • reply
  • like
I'm using material-ui, which is overriding the background, that's why you use &&, to prioritize it
  • reply
  • like
you can use a styles provider too, which would override too, but I want to know if it's possible to use this method with object syntax
  • reply
  • like
Ah okay you're right -- I forgot about the && prioritization.
// from material-ui docs
"Another approach is to use the && characters in styled-components to bump up specificity by repeating the class name. You should avoid the usage of !important."
Edited
  • reply
  • like
with version >3.3.0
  • reply
  • like
you can use object syntax, which is something like: const example = styled.div({ background: 'red', })
  • reply
  • like
SC FAQ suggests three ampersands 😂
  • reply
  • like
aswell you can use props in a really clean way: ```const example = styled.div( props => { background: props.bgcolor, })
  • reply
  • like
https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
The way to override styles with a high specificity is to simply increase the specificity of your own styles. This could be done using !important, but that's error prone and generally not a good idea. We recommend the following technique:
const MyStyledComponent = styled(AlreadyStyledComponent)`
&&& {
color: palevioletred;
font-weight: bold;
}
`
const MyStyledComponent = styled(AlreadyStyledComponent)`
Edited
  • reply
  • like
it's working with only 2, but dunno how to do it with the object syntax xD
  • reply
  • like
I'll try again today
  • reply
  • like
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.
  • 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