如何覆盖引导程序的标记样式？

Question

我已经阅读了很多有关此的文章，但仍然无法正常工作。我只是想删除引导程序在mark标记周围添加的填充，因为我在用户键入时更改了突出显示，并改变了键入时看到文本在移动的震撼。

这是我的App.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}/>

这是React渲染的HTML

<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 { ... }