react codemirror2提示信息css设置

在React中使用CodeMirror2库添加实时编辑功能时，若需要自定义提示信息样式（如CSS），通常需要对CodeMirror的配置对象进行扩展，并针对`lint`或者`previewHTML`等插件进行个性化设置。以下是一个简单的例子：

import React from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/addon/lint/lint.css'; // 引入Lint样式的CSS
import 'codemirror/mode/css/css'; // 使用CSS模式
import 'codemirror/theme/eclipse'; // 或者选择其他主题

const customLintMessage = (info) => {
  const {from, to, text} = info;
  return `<span class="cm-error" style="background: #f00; color: #fff;">${text}</span>`;
};

const MyCodeEditor = () => {
  const options = {
    mode: 'text/css',
    theme: 'eclipse', // 主题选择
    lintWith: 'css-lint', // 使用内置的CSS Lint插件
    lineNumbers: true,
    lineWrapping: true,
    extraKeys: {
      "Ctrl-Space": "autocomplete",
    },
    hintOptions: {
      completeSingle: false, // 设置不自动完成
      hint: CodeMirror.hint.csshint, // 使用内置的提示
      hlMatch Penting: function(cm) { // 自定义提示样式
        cm.showHint({
          completeSingle: false,
          hint: CodeMirror.hint.custom(customLintMessage),
        });
      },
    },
  };

  return (
    <div>
      <CodeMirror value="" options={options} />
    </div>
  );
};

export default MyCodeEditor;

在这个例子中，我们设置了`hlMatchPentding`函数来自定义提示样式，当用户输入错误时，会显示一个红色背景和白色字体的错误标记。