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.

:not(style) ~ :not(style)

See original GitHub issue

Currently I am having to override most of my useBreakpointvalue items with an important to remove this random css rule, but this means I cannot use my number based fontSizes, lineHeights etc.

const margin = useBreakpointValue({ base: "0 !important", md: space["0.5"] });

So in this situation I cannot use important on my space

What is this style and how can I find out where it is defined?

Theme

const space = {
  "-1": "0rem",
  0: "0.5rem",
  1: "1rem",
  2: "1.5rem",
  5: "2.5rem",
  8: "4rem",
  13: "6.5rem",
  21: "10.5rem",
  35: "16.5rem",
};

This is adding the styles from the first image, to all child components of .chakra-stack.css-gafkgn

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:11 (2 by maintainers)

Top GitHub Comments

8reactions

RyanPinPBcommented, Nov 15, 2020

I am also trying to figure out where this rule is coming from. It is not wanted and now I have use an !important css declaration to get around it.

Unwanted style added by something in Chakra:

.css-15jzajg>*:not(style)~*:not(style) {
    margin-left: 0.5rem;
}

1reaction

JakeGinnivancommented, Nov 22, 2020

Also, these styles are coming from the Stack component in Chakra UI. Due to the way emotion handles style in SSR, that was the best CSS selector we could use. We could have used. “> * + *” but it doesn’t work as expected.

An alternative is to use https://emotion.sh/docs/ssr#advanced-approach

When you do not use the default cache it will not issue that warning. The advanced approach also extracts the styles into a single style tag, so this workaround is not required.