CodeMirror has no CSS effect

[erfoon]

I've been using react-codemirror2 for sometime and everything was fine' My usage actually was basic and was not so customized and complicated. But out of nowhere today I saw everything is broke and code mirror is out of shape. Like this: I don't know what made it like this, I also updated both react-codemirror2 and codemirror both to latest version. This is my code:

              <CodeMirror
                id="queryEditor"
                value={this.props.value}
                options={{
                       mode: 'jsx',
                       lineNumbers: true,
                              }}
                onBeforeChange={(editor, data, value) => {
                  this.handleQueryChange(value);
                }}
                onChange={(editor, data, value) => {}}
              />

I also put these which was not in my code before, but still no changes:

require('codemirror/theme/material.css');
require('codemirror/theme/neat.css');
require('codemirror/mode/xml/xml.js');
require('codemirror/mode/javascript/javascript.js');

[erfoon]

@scniro Whyy? At least refer to a similar issue. I coudn't find this problem anywhere else ...

[scniro]

@erfansamieyan there's virtually no detail in here. Is there a JavaScript error? If so, what is the error? What was the old version you've upgraded from? I closed this out because there's nothing for me to look into here. Your issue basically concludes "everything is broke" - but the example continues to run as it did. I can only assume there is an issue specific to your usage.

[erfoon]

@scniro Actually what I mentioned was almost everything. No errors, no more complexities in my usage. However I still have this problem, maybe there is something wrong with loading css. Anyway, thanks for your response.

[erfoon]

After days of dealing with this issue unfortunately I should say that I still have this problem. So I want to provide more details and see if anyone can suggest any workaround. The thing which I'm pretty sure now is that my CodeMirror does not get effected by the css file I imported in file. Here is my whole component. Actually the real is more complex and has multiple 'CodeMirror`s (although it doesn't in the form below either).

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

So far it seems exactly what are provided in doc and I don't see any differences in other sample codes. So what can be the problem? In my opinion codemirror.css is not loaded (or it does not effect CodeMirror) but I don't know the reason. For example in inspect of browser when I see the components, the CodeMirror-gutter must be affected by this style inside the codemirror.css which is:

  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px;
}

Which is like that in the provided demo. But in my component:

You see! Totally a different thing (and also effected by unknown styles). It's same for other components too. I also uninstalled and re-installed both react-codemirror2 and codemirror just in case but nothing has changed. So I'll appreciate if any workaround is suggested. Thanks

[scniro]

@erfansamieyan It looks like you're not requiring the additional css files. Did you see the bit on requiring resources in the readme?

note that the base codemirror.css file is required in all use cases

You'll likely want to ensure your webpack configuration is setup to import the files for you, or however else you'd normally include a css file

[erfoon]

@scniro thanks for you response, as you can see in the code I put these lines in my imports:

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

I had looked into the part you mentioned and read it carefully several times. The only difference I see that in doc there is a @ sign before the import so I thought it is a style for import cause when I write @import it is a syntax error and it doesn't compile. So is the import doing anything with my problem?

[scniro]

@erfansamieyan that's all going to depend on your development setup. Check out the webpack config and the way the .scss files are loaded. Again, this is not an issue with the repo and is specific to your use case. I'd highly recommend opening up a question on stackoverflow.com