styled-components

// 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

Pencho@pencho

3:06pm

with version >3.3.0

3:06pm

you can use object syntax, which is something like: const example = styled.div({ background: 'red', })

Kevin Bost@kevbost

3:08pm

SC FAQ suggests three ampersands 😂

Pencho@pencho

3:08pm

aswell you can use props in a really clean way: ```const example = styled.div( props => { background: props.bgcolor, })

Kevin Bost@kevbost

3:08pm

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

Pencho@pencho

3:09pm

it's working with only 2, but dunno how to do it with the object syntax xD

3:09pm

I'll try again today

Kevin Bost@kevbost

3:10pm

I've only had to do that once maybe. I think when referencing another styled-component via

${SomeComponent}: { ...etc }

3:10pm

Oh i thought you were saying the double && wasnt working

3:12pm

Interesting, not sure if they handle prioritization overrides if passing an object. The TS source may have some insight

Edited

3:17pm

I dont know typescript well enough to really grok this, but i'm sure it's in there somewhere

@pencho

: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-components/index.d.ts

Edited

David Daniell@david-daniell

3:24pm

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.

3:25pm

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.

3:26pm

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)?

3:27pm

Maybe based on some process.env variable, or any other strategy.