react-codemirror2 icon indicating copy to clipboard operation
react-codemirror2 copied to clipboard

There is no style when I introduce the js and css files into the React project

Open LS-LILEI opened this issue 4 years ago • 1 comments

this is my code Importing styles has no effect ` // Import the code mirror component. import {Controlled as CodeMirror} from 'react-codemirror2';

// The following two imports is for the theme. import '../lib/libraries/extensions/python/codemirror.css'; import 'codemirror/theme/material.css';

// This import is for the language syntax highlighting. import 'codemirror/mode/python/python.js';

//...

render () { return ( <AssetPanel buttons={[{ title: '新增代码', img: surpriseIcon, onClick: this.handleAddPython }]} items={[]} selectedItemIndex={this.state.selectedSoundIndex} > <CodeMirror value={val} options={options} /> </AssetPanel> ); }

`

LS-LILEI avatar Jun 05 '21 12:06 LS-LILEI

You may want to try require instead of import for the css files. I guess your paths are not correct. According to the sample demo, the paths to import should be

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

This is the code from reactJs, but maybe try this path and see if it helps.

kennguyen0303 avatar Jul 04 '21 03:07 kennguyen0303