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 :)
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.