react codemirror2 2没有CSS效应。

Question

我将反应码2添加到我的项目中，但它没有加载css，尽管我导入了codemirror.css文件，因为有人提到css应该以某种方式应用到组件(这里提到的)中，但长话短说，它仍然呈现如下：没有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文件中添加css文件(如下面所示)，但是没有什么改变。

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

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

谢谢:)

Answer 1

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

Answer 2

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

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 = {}一样。