@emotion/styled not respecting asterisk *

[mikematos84]

I have an emotion-styled component that I am trying to force display: inline on any child element inside of it. Normally doing something like > * { display: inline } works perfectly fine, but somehow does not seem to be working. My current code looks something like this:

// Styling
const FigCaption = styled.figcaption`
  color: var(--caption-font-color);
  font-family: var(--caption-font);
  font-weight: var(--catpion-font-weight);
`;

const Hero = styled(FigCaption)`
  background: black;
  color: white;

  > * {
    display: inline
  }
`

// Html Structrure
<FigCaption>
  <Caption>{caption}</Caption>
  <Credit>{credit}</Credit>
</FigCaotion>

Previously, my styling was done in styled-components, which I have since converted over to using @emotion/styled. However, this is pretty standard CSS syntax, so I am unsure why it isn't getting appropriately interpreted.

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[srmagura]

I think you are missing an ampersand:

& > * {
  display: inline
}

Also, the ability to nest blocks of CSS is not (yet) a feature of vanilla CSS. This is a feature of Emotion that was inspired by Sass.