react-codemirror2没有CSS效果 [英] react-codemirror2 has no CSS effect

问题描述

我在我的项目中添加了 react-codemirror2 ，但是虽然我没有加载CSS导入 codemirror.css 文件，因为提到了css应该以某种方式应用于组件中（在这里提到），但是长话短说，它仍然是这样呈现的：
没有CSS的代码镜像

I added 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), but long story short it is still rendered like this: Code Mirror with no CSS

我真的不知道问题出在哪里可。因此，这是我的代码：

I really don't know what the issue can be. So here is my code:

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 文件中（如下所示），但没有任何更改。

I also tried to @import the css file inside the global.css file of my project (like below) but nothing's changed.

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

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

I really don't know what else should be tried or what am I doing wrong, because it shouldn't be something very special. So I'm asking you, and any suggestions would be helpful.

谢谢：）

推荐答案

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

Okay this is something which may only happened to me but I post my solution, maybe someday someone have same issue. As I said the problem was not loading the css, I don't know how others handle this issue but I have to copy all styles inside the node_modules/codemirror/lib/codemirror.css into a new css file and put it in some path inside my project. And inside the global.css file of my project I just imported that new created file like @import absolute/path/to/file/codemirror.css; and it worked at least for one case and one theme. I'm sure there is better ways to connect to all css files of codemirror but for now it did the basic thing that I needed.

这篇关于react-codemirror2没有CSS效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！