react-codemirror2 没有 CSS 效果答案

【问题标题】：react-codemirror2 has no CSS effectreact-codemirror2 没有 CSS 效果
【发布时间】：2018-08-13 16:06:00
【问题描述】：

我在我的项目中添加了react-codemirror2，但是尽管我导入了codemirror.css 文件，但它并没有加载css，因为它提到css 应该以某种方式应用到组件中（mentioned here），但长话短说它仍然呈现如下： Code Mirror with no CSS

我真的不知道问题是什么。所以这是我的代码：

import { connect } from 'react-redux';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import { Controlled as CodeMirror } from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');

class MyComponent extends Component {
  handleValueChange = value => this.props.onUpdateValue({ value });
  render() {
const { shade } = this.props;
const myOptions = {
      mode: 'xml',
      theme: shade === 'dark' ? 'material' : 'default',
      lineNumbers: true,
    }
return (
  <CodeMirror
    id="editor"
    value={this.props.value}
    options={myOptions}
    onBeforeChange={(editor, data, value) => {
      this.handleValueChange(value);
    }}
    onChange={(editor, data, value) => {}}
  />
);
  }
}

function mapStateToProps(state) {
  return {
    shade: state.muiTheme.shade,
  };
}

export default connect(
  mapStateToProps,
  null
)(MyComponent);

我还尝试@import 我项目的global.css 文件中的css 文件（如下所示），但没有任何改变。

@import '/node_modules/codemirror/lib/codemirror.css';
@import '/node_modules/codemirror/theme/material.css';

我真的不知道还应该尝试什么或我做错了什么，因为它不应该是非常特别的东西。所以我在问你，任何建议都会有所帮助。

谢谢:)

【问题讨论】：

标签： reactjs codemirror react-codemirror

【解决方案1】：

我不知道你为什么会遇到这个问题，但它对我有用。

import React, { Component } from "react";

// Import the code mirror component.
import { Controlled as CodeMirror } from "react-codemirror2";

// The following two imports is for the theme.
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

// This import is for the language syntax highlighting.
import 'codemirror/mode/javascript/javascript.js';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
       src: ''
    }
  }

  render() {
    let option = {
      mode: 'javascript',
      theme: 'material'
    };

    return (
      <div>
        <Controlled
          value={this.state.src}
          option={option}
          onBeforeChange={(editor, data, value) => {
            this.setState({ src: value });
          }}
          onChange={(editor, data, value) => {}}
        />
      </div>
    )
  }
}

也许问题就在这里：

const myOptions = {
  mode: 'xml',
  theme: shade === 'dark' ? 'material' : 'default',
  lineNumbers: true,
}

你应该在return之前设置渲染函数中的选项对象，或者将它设置在constructor()并附加到this，如this.option = {}。

【讨论】：

请注意，require('....css'); 会导致样式略有不同。字体大小是 0.8em 而不是 1em。显然，这也可以在样式表中进行更改，但我认为值得一提。

【解决方案2】：

好的，这可能只发生在我身上，但我发布了我的解决方案，也许有一天有人会遇到同样的问题。正如我所说的问题不是加载css，我不知道其他人如何处理这个问题，但我必须将node_modules/codemirror/lib/codemirror.css中的所有样式复制到一个新的css文件中，并将其放在我项目中的某个路径中。在我的项目的global.css 文件中，我刚刚导入了新创建的文件，如@import absolute/path/to/file/codemirror.css;，它至少适用于一个案例和一个主题。我确信有更好的方法可以连接到codemirror 的所有css 文件，但现在它完成了我需要的基本操作。

【讨论】：

我以前用同样的方法解决了这个问题。