Как переопределить стиль отметки bootstrap?

Question

Я прочитал кучу статей на эту тему, но она все еще не работает. Я просто пытаюсь удалить заполнение, которое bootstrap добавляет вокруг тега mark, так как я изменяю подсветку по мере того, как пользователь печатает текст, и его раздражение, чтобы увидеть, как текст перемещается при вводе.

Вот мое приложение. css

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

Вот фактический код React (я использую Highlighter, который генерирует тег \).

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

Вот HTML рендеринг React

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

Вот мой css импорт

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

А вот и вычисленный стиль

Так расстраивает !! :)

Answer 1

Вы нацелены не на тот Элемент

Это выбирает <mark>, элемент-потомок с query классом

mark .query { ... }

Вы хотите найти <mark> у которого также есть класс query, поэтому соедините их вместе

mark.query { ... }