Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

styled-components does not inject styles in head

See original GitHub issue

Hello,

As said in the title, I cannot make styled-components work in my project. I am using React with Ruby via the webpacker gem if that’s of any help. The CSS is not included in my <head>, however it is creating on-fly CSS classes and gives those classes to my element h2 in the below example, but those classes do not have any CSS linked to them.

I am using React 16.6.0 and styled-components 4.1.1.

Environment

System:

OS: Linux 4.4 Ubuntu 16.04.5 LTS (Xenial Xerus)
CPU: (4) x64 Intel® Core™ i5-6300HQ CPU @ 2.30GHz
Memory: 784.58 MB / 7.63 GB
Container: Yes
Shell: 4.3.48 - /bin/bash

Binaries:

Node: 8.4.0 - /usr/local/heroku/bin/node
Yarn: 1.12.3 - /usr/bin/yarn
npm: 6.1.0 - ~/project/.bin/npm

npmPackages:

styled-components: ^4.1.1 => 4.1.1

Reproduction

I do not know how to reproduce this issue, it might be linked to my setup. I spent quite some time on it and still don’t know where it’s coming from. I basically just yarn add styled-components, added this snippet in my file:

import styled from "styled-components"

const Title = styled.h2`
  font-size: 5.5em;
  text-align: center;
  color: blue;

and used <Title> My Title </Title> instead of my former <h2> My Title </h2> tag

Expected Behavior

My title should get the CSS I defined.

Actual Behavior

My title is inside a <h2> tag with styled-components classes sc-bdVaJa csRtfh but those classes do not have any CSS. No CSS is injected in my head tag. The only injected tag seems to be

<style data-styled="" data-styled-version="4.1.1">
/* sc-component-id: sc-bdVaJa */
</style>

Issue Analytics

State:
Created 5 years ago
Reactions:31
Comments:45 (10 by maintainers)

Top GitHub Comments

38reactions

enzofereycommented, Nov 30, 2019

Same problem here using a CRA setup.

My dependencies:

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0",
"styled-components": "^4.4.1",

Downgrading to styled-components@4.2.0 solves the issue for me, but…

The good news is that I found the reason !

I had Loom extension installed (latest version). As soon as I uninstalled it latest version of styled-components worked again.

This is how I found about it:

(look at the request URL)

Screenshot 2019-11-22 at 08 53 33

(look at the url id)

Screenshot 2019-11-22 at 08 52 21

(after uninstalling no content.css file)

Screenshot 2019-11-22 at 08 54 20

So https://github.com/styled-components/styled-components/issues/2254#issuecomment-479740349 was right 😄

FYI: I already reported the issue to Loom, hopefully they will fix it following the tips for chrome extension creators above.

15reactions

probablyupcommented, Nov 30, 2019

@pmburov In production we use the CSSOM APIs to inject styles, which are represented differently in dev tools and can be read by accessing the .sheet.cssRules property on the stylesheet DOM node.

This thread has gotten very offtopic so I’m going to close it. If you have an issue with reproduction, please open as a new thread.