CSS selector with nesting square brackets react

Question

I came across a CSS selector with nesting square brackets like this in a library. Tried to search and understand what does it mean, but can't find any information. Can anyone explain it:

[['h1', 'h2', 'h3', 'h4', 'h5', 'h6']]: {
    // CSS props here
}

Edit: it's in the style props of GlobalTheme component from emotion lib, the project using React.

Doesn't look like CSS to me, so this is probably some preprocessor syntax, I suppose. — C3roe
– C3roe, Commented Oct 26, 2021 at 14:23
@CBroe Oh, lemme edit a bit it's in the style props of emotion library and the project is React. — Andy Nguyen
– Andy Nguyen, Commented Oct 26, 2021 at 14:32

Sabshane · Accepted Answer · 2021-10-26 14:48:34Z

1

As stated here it is mostly used to style components.

Example from the documentation :

  import styled from '@emotion/styled'

const Child = styled.div({
  color: 'red'
})

const Parent = styled.div({
  [Child]: {
    color: 'green'
  }
})

render(
  <div>
    <Parent>
      <Child>green</Child>
    </Parent>
    <Child>red</Child>
  </div>
)

answered Oct 26, 2021 at 14:48

Sabshane

2512 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS selector with nesting square brackets react

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related