react-codemirror2 没有 CSS 效果

Question

我添加了react-codemirror2 to my project but it does not load the css although I import the codemirror.css file, because it is mentioned that css should be applied into the component somehow (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';

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

谢谢:)

Answer 1

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

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 = {}.

react-codemirror2 没有 CSS 效果

react-codemirror2 has no CSS effect

codemirror

reactjs

react-codemirror