Attribute selector in styled components

Question

I'm trying to use this syntax (using Emotion):

   .switch[data-isOn="true"] {
     justify-content: flex-end;
    }

Inside my styled component:

const Switch = styled('div')({
  cursor: 'pointer',
  ['data-ison'='true']: {
    justifyContent: 'flex-end',
  },
});

With no luck so far, how should I implement this?

Answer 1

You need to reference the current selector using &, otherwise any nested selectors will be interpretated as child selectors.

You are in Javascript here. 'data-ison'='true' is an assignment that is evaluated to true. so you Code actually means "assign the styles at the key true".

Also, you should always use lowercase data attributes, see this answer https://stackoverflow.com/a/25033330/2438494

Your styled components example in regular CSS would be:

   .switch true {
     justify-content: flex-end;
    }

Try this instead:

const Switch = styled('div')({
  cursor: 'pointer',
  ["&[data-ison='true']"]: {
    justifyContent: 'flex-end',
  },
});

Answer 2

Should be:

const Switch = styled.div`
  cursor: pointer;

  &[data-ison='true'] {
    justify-content: flex-end;
  }
`

You can test this on the editable example: