Styled Component Styles Are Disabled in Chrome Devtools

Styled Component styles are disabled in Chrome DevTools

It's because styled-components injects styles through the CSSOM API, which the Dev Tools in Chrome (and every other browser AFAIK) can't handle. See this ticket: https://bugs.chromium.org/p/chromium/issues/detail?id=387952

Note that this is only true when styled-components is in production mode, i.e. process.env.NODE_ENV is set to "production". As long as you aren't in production mode, styled-components should generate normal <style> tags, which you can interact with through the Dev Tools.

Images Rerendering inside Styled Component when Chrome Dev Tools is open

If you re-activate cache in devtool on network tab the issue disappear.

So the question becomes why the browser refetch the image when cache is disabled ;)

It is simply because the dom change so browser re-render it as you mentioned it the class change.

So the class change because the componetn change.
You create a new component at every render.

A simple fix:

import React from "react";
import styled from "styled-components";

const ChannelListDiv = styled.div`
    height: ${props => props.listHeight};
    overflow-y: scroll;
    overflow-x: hidden;
`;

const ChannelList = ({ children, listHeight }) => {
  return <ChannelListDiv listHeight={listHeight} className={"ChannelList"}>{children}</ChannelListDiv>;
};

export default ChannelList;

Extending styles with styled-components not working

As stated in documentation:

The styled method works perfectly on all of your own or any
third-party components, as long as they attach the passed className
prop to a DOM element.

Example

// This could be react-router-dom's Link for example, or any custom component
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

Ref: https://www.styled-components.com/docs/basics#styling-any-component

How to easily inspect styled-components using dev tools?

That's exactly why we created our Babel plugin, when using it you'll get class names that include the name you gave your component:

<div class="Sidebar__Button-KSdffgy oPwefl">

On top of that we set the displayName of the generated component too, which means in your React DevTools you'll see the actual component name rather than just <div> or <Styled(Component)>.

To use the Babel plugin install it with npm install --save-dev babel-plugin-styled-components and then add it to your Babel configuration: (e.g. in your .babelrc)

plugins: ["styled-components"]

That's it! Happy debugging /p>

---

Note that if you're using create-react-app you cannot change the Babel configuration. I use and would recommend react-app-rewired to be able to change configurations without having to eject. We've also built react-app-rewire-styled-components which automatically integrates the styled-components Babel plugin for you!

What does it mean when a CSS rule is grayed out in Chrome's element inspector?

For me the current answers didn't explain the issue fully enough, so I am adding this answer which hopefully might be useful to others.

Greyed/dimmed out text, can mean either

1. it's a default rule/property the browser applies, which includes defaulted short-hand properties.
2. It involves inheritance which is a bit more complicated.

Inheritance

Note: Chrome dev tools "style" panel will display a rule set, because one or more rules from the set are being applied to the currently selected DOM node.
I guess, for the sake of completeness, dev tools shows all the rules from that set, whether they are applied or not.

In the case where a rule is applied to the currently selected element due to inheritance (i.e. the rule was applied to an ancestor, and the selected element inherited it), chrome will again display the entire ruleset.

The rules which are applied to the currently selected element appear in normal text.

If a rule exists in that set but is not applied because it's a non-inheritable property (e.g. background color), it will appear as greyed/dimmed text.

here is an article that give a good explanation - (Note: the relevant item is at the bottom of the article - figure 21 - unfortunately the relevant section doesn't have a heading) -http://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art033

Excerpt from the article

This [inheritance scenario] can occasionally create a bit of confusion, because defaulted
short-hand properties; figure 21 illustrates the defaulted short-hand
properties of the font property along with the non-inherited
properties. Just be aware of the context that you're looking at when
examining elements.

---

Related Topics