How do I override bootstrap's mark style?

Question

I've read a bunch of articles on this but it's still not working. I'm just trying to remove the padding that bootstrap adds around the mark tag, since I'm changing highlights as the user types and its jarring to see the text move around when you type.

Here is my App.css

mark .query{
  padding: 0em;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

Here is the actual React code (I'm using Highlighter, which generates a \ tag).

<Highlighter
                highlightClassName="query"
                searchWords={[this.props.query]}
                autoEscape={true}
                textToHighlight={result}/>

Here is the HTML rendered by React

<mark class="query ">Text</mark>

Here is my css import

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

And here is the computed style

So frustrating!! :)

Answer 1

You're targeting the wrong Element

This is finding a <mark>, and then selecting the descendant Element with the query class

mark .query { ... }

You want to find a <mark>, which has also has a query class, so join them together

mark.query { ... }