Targeting nested elements using tagged-template literal notation

[dungle-scrubs]

Hola,

Using tagged-template literal notation with import styled from '@emotion/styled', is it possible to target nested elements, not by tag name but by class name or perhaps the name of the component itself?

For example, I have this setup:

const Wrapper = () => {

  const wrapperStyles = css`
    background-color: blue;

   // Some sort of nesting here....
  `

  return (
    <div css={wrapperStyles}>
      <SomeOtherComponent />
      <Panel />
      <Panel />
      <Panel />
      <Panel />
    </div>
  )
}

export default Wrapper

I'd like to target only Panel and don't know how to exclude SomeOtherComponent

I've also tried adding a data attribute and targeting like this:

const Wrapper = () => {

  const wrapperStyles = css`
    background-color: blue;

    [data-type='panel'] {
      background-color: purple;
    }
  `

  return (
    <div css={wrapperStyles}>
      <SomeOtherComponent />
      <Panel dataType="panel" />
      <Panel dataType="panel" />
      <Panel dataType="panel" />
      <Panel dataType="panel" />
    </div>
  )
}

export default Wrapper

However, no luck.

Thoughts?

[hasparus]

Hey @dungle-scrubs, that's wrong repo for this question. It might be useful to post stuff like this in https://github.com/emotion-js/emotion/.

Try data-type="panel" instead of dataType="panel". aria- and data- props are kebab-case, unlike any other props.

In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased. For example, you can keep aria-label as aria-label.

[dungle-scrubs]

Ah thanks, sorry about that.