title: Code mirror styling with class name not working
body: <p>Code mirror class name that styles code mirror component in NextJs is not working.....
  Please suggest a better solution other than the workaround below:</p>
  <pre><code>    &lt;CodeMirror
        className={&quot;CodeMirror&quot;}
        height=&quot;200px&quot;
        onBeforeChange={handleChange}
        value={value}
        options={{
          lineWrapping: true,
          lint: true,
          mode: language,
          // theme: &quot;cobalt&quot;,
          lineNumbers: true,
        }}
      /&gt;
  
  </code></pre>
  <p>The above code will not change the height with the class name</p>
  <pre><code>.CodeMirror {
    height: 420px !important;
  }
  </code></pre>
  <p>of course you need to set up your code mirror edit like this:</p>
  <pre><code>import dynamic from &quot;next/dynamic&quot;;
  import React from &quot;react&quot;;
  
  const CodeMirror = dynamic(
    async () =&gt; {
      await import(&quot;codemirror/lib/codemirror.css&quot;);
      await import(&quot;codemirror/mode/xml/xml&quot;);
      await import(&quot;codemirror/theme/material.css&quot;);
      //await import(&quot;codemirror/theme/cobalt.css&quot;);
      await import(&quot;codemirror/addon/search/match-highlighter&quot;);
      await import(&quot;codemirror/mode/javascript/javascript&quot;);
      await import(&quot;codemirror/mode/css/css&quot;);
      return import(&quot;react-codemirror&quot;);
    },
    { ssr: false }
  );
  
  const Editor = (props) =&gt; {
    const { language, value, onChange } = props;
  
    const handleChange = (e) =&gt; {
      onChange(value);
    };
  
    return (
      &lt;CodeMirror
        // className={&quot;CodeMirror&quot;}
        height=&quot;200px&quot;
        onBeforeChange={handleChange}
        value={value}
        options={{
          lineWrapping: true,
          lint: true,
          mode: language,
          // theme: &quot;cobalt&quot;,
          lineNumbers: true,
        }}
      /&gt;
    );
  };
  
  export default Editor;
  </code></pre>
  <p>The only to style the component so far is to place the css class name called .CodeMirror in global.css in your styles.</p>
  <pre><code>.CodeMirror {
    height: 420px !important;
  }
  
  </code></pre>
  <p>A fix of the classname would be better, but so far you can use the the workaround above.</p>