React-Codemirror match-highlighter 插件不突出显示文本答案

【问题标题】：React-Codemirror match-highlighter addon not highlighting the textReact-Codemirror match-highlighter 插件不突出显示文本
【发布时间】：2020-07-24 15:00:05
【问题描述】：

我正在使用 react-codemirror 并希望在 Codemirror 中突出显示文本“Hello”，但 match-highlighter 插件没有突出显示相同的内容。下面是相同的代码。

import React, { Component } from 'react';
import { render } from 'react-dom';
import CodeMirror from 'react-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/search/match-highlighter';
import 'codemirror/mode/javascript/javascript';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'CodeMirror',
      code: '//Test Codemirror'
    };
  }

  updateCode(newCode) {
        this.setState({
            code: newCode,
        });
    }

  render() {
    let options = {
        lineNumbers: true,
        mode: 'javascript',
        highlightSelectionMatches: {
          minChars: 2,
          showToken: /Hello/,
          style:'matchhighlight'
        },
        styleActiveLine: true,
        styleActiveSelected: true,
    };
    return (
      <div>
        <CodeMirror value={this.state.code} onChange={this.updateCode.bind(this)} options={options}/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

当前输出在下面的屏幕截图中，单词没有突出显示。

【问题讨论】：

标签： javascript reactjs codemirror react-codemirror

【解决方案1】：

我找到了解决此问题的方法。为了启用突出显示需要添加一个与样式属性对应的css。我在 css 文件中添加了以下代码，它开始工作了

.cm-matchhighlight {
  background: red !important
}

现在它可以正确突出显示标记

【讨论】：