Question

我在项目中添加了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的css文件放入我项目的global.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 = {}。

react-codemirror2没有CSS效果

2 个答案: