【React】react-simplemde-editor:文字入力エリア(のみ)にスクロールバーを追加する

課題

Reactでreact-simplemde-editorを導入してMarkdownエディターを作成時、文字入力エリアを固定してスクロールバーをつけたいんだがタグの中にラッピングされてしまって制御できない。

対応

開発者モードでCSSを確認したところ、どうやら↓のheightが原因らしく、こいつを外すと想定していた挙動になるっぽい。

このcssファイルは以下にあるとのことで、開いてみる。

{Reactプロジェクトフォルダ}/node_modules/easymde/dist/easymde.min.css

改行されてなくて見にくいけど、「.EasyMDEContainer .CodeMirror{」で検索してみると、あった!この赤枠の「height:auto」を削除してやる。

ついでに文字入力エリアをもう少し広くしたいので、ここのheightも300→350に変更しておく。

キャッシュが効いてると変化がわからないので、node_modulesフォルダ直下の「.cache」フォルダを丸っと削除し、npm startをし直す

無事文字入力エリアにのみスクロールバーが表示されました!