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

Question

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

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