Search code examples
cssreactjstypescriptjsxhighlight

how can I change highlight text color for only a react component?

I am using react and want to change text highlight color. First I went for a working solution:

Highlight.css

    ::selection {
      background:#fbc308;
      color: black
    }

somecomponent.tsx

import './highlight.css'

However, it changes text highlight color for every elements, which is not I want. And,

<div style={{"::selection" : {
      background:"#fbc308",
      color: "black"}}}><p>Something</p></div>

didn't work (error)

So, I went for:

.somecomponent p::selection {
   ...style
 }

But however it only changes p elements. I want to change all text highlight color in a component.

Thanks.

Solution

  • Thanks for Eduard's answer, I resolved it by

    .somecomponent *::selection