Can you access another component's css function?

[dungle-scrubs]

I think I'm trying to do something that might not work, but checking just in case. I have two different types of card components that all appear within the same parent component.

My goal is to have it such that both card components share the same "active" state. So I've created a global style in a separate file that looks something like this:

theme = {
  cardActive: css`
    background-color: green;
  `
}

Then, I programmatically add the class name like this

card.classList.add(theme.cardActive.name)

I've also tried prepending css-.

So I'm successfully adding the same generated class name across different components that otherwise would create their own unique class names if built inside the components. However, no css classes are actually applied.

I'm definitely missing something fundamental. Any ideas?

Thanks

[Andarist]

You are definitely not using Emotion like it is intended to. As to why it doesn't work - you'd have to share a runnable repro case of the problem but either way, this is not something we could recommend

[dungle-scrubs]

Thanks for the advice, I had a feeling I was pushing it in the wrong direction.