Duplicate generated css classname

Two styled components have same css rule will have same generated css class name. It’s OK for production. But when we develop website if we modify one css class rule by using dev tool. The changed is affect to other component too.

Are styled component have same class by design to reduce output css?

Version

1.0.5

Steps to reproduce

const HeaderContent = styled.div`
  max-width: 1280px;
`
const FooterContent = styled.div`
  max-width: 1280px;
`

Expected Behavior

HeaderContent and FooterContent have different generated class name

Actual Behavior

HeaderContent and FooterContent have same generated class name output class name: dqUvXD

[mxstbr]

Yes, this is working as intended I think? /cc @geelen

We generate the class name based on a hash of the contents of the class.

[bhough]

@nhducit If you want to just modify one in the dev tools, you can adjust it in the element.style pane when inspecting and it will only adjust that particular element.

I would imagine this is how we would always want it to work following most modern approaches to CSS. If they both have the same styles I would give them the same class and modify them if they diverge. Without generated class names, I would name them with a class that describes them both.