Styled-components-website: Add "How can I override styles with higher specificity?" to FAQ

[mxstbr]

Since this question comes up almost every day in the main repo, we should add a FAQ entry to the website.

Based on this question and answer we should add a note about the &&& workaround and why it works to the FAQ.

[GGAlanSmithee]

I can take this one

[GGAlanSmithee]

Regarding overriding inline CSS, will this trick work too, or will you have to use !important in that case? (I can investigate this if needed)

[mxstbr]

I think if you use enough ampersands it might work? Not sure though, good question!

[GGAlanSmithee]

After a quick glance at google it looks like the most reliable way is to use the element-attr CSS Selector in conjunction with !important;

/* vanilla CSS */
div[style] {
   font-size: 12px !important;
   color: blue !important;
}

I'll make some tests though, and document both cases in the FAQ section.

[mxstbr]

I'll make some tests though, and document both cases in the FAQ section.

SGTM

[morajabi]

The ampersand solution is for overriding styles applied with former classNames or styled applied from the parent and some other cases. It's not meant to be used for overriding inline styles.

/* css */
.header {
  background: #453434; /* overrided */
}

// JSX
<Div className="header sc-wS45d" />

const Div = styled.div`
  && {
    background: white; /* applied */
  }
`

[GGAlanSmithee]

@morajabi thanks, that's what I thought. Let's document both cases though, for clarity.

[justintemps]

Just to update @morajabi's answer , according to the docs you need three &s.

So this would be the correct syntax:

// JSX
<Div className="header sc-wS45d" />

const Div = styled.div`
  &&& {
    background: white; /* applied */
  }

[mxstbr]

You can use as many & as you want, the more you use the higher the specificity will be!

[joebentaylor1995]

Compile error when using more than two &s

[justintemps]

@joebentaylor1995 can you share an example of a styled component that's failing to compile?

[alfred-pb]

Any idea how to do this with createGlobalStyle?
This doesn't work.

export const StyleHtmlColor = createGlobalStyle`
  html {
    && {
      background-color: red;
    }
  }
`;

[Stupidism]

I had this problem with third-party component libararies with dynamic css injections like antd.

The style tags from antd and styled-components could be re-ordered according to the js excution order.

And I found the solution in webpack's official document:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: function insertAtTop(element) {
                var parent = document.querySelector('head');
                // eslint-disable-next-line no-underscore-dangle
                var lastInsertedElement =
                  window._lastElementInsertedByStyleLoader;

                if (!lastInsertedElement) {
                  parent.insertBefore(element, parent.firstChild);
                } else if (lastInsertedElement.nextSibling) {
                  parent.insertBefore(element, lastInsertedElement.nextSibling);
                } else {
                  parent.appendChild(element);
                }

                // eslint-disable-next-line no-underscore-dangle
                window._lastElementInsertedByStyleLoader = element;
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};

And add a style tag in the index.html: