react-codemirror2 has no CSS effect Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of react-codemirror2 has no CSS effect without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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);

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.

Thanks 🙂

Answer

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.

We are here to answer your question about react-codemirror2 has no CSS effect - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji