draft-jsエディター自体を設計するにはどうすればよいですか？

Question

draftjsの使い方を勉強しようとしていますが、エディタ自体にCSSを適用する方法がわかりません。ドキュメントでは、コンテンツブロックを設計することは可能ですが、私はエディタを設計する方法を探しています。

Answer 1

ドラフトで使用できるエディタにいくつかのクラス名が設定されています。ここでは（非包括的）のリストです：

• .DraftEditorルートが
• .DraftEditor-editorContainer
• .public-DraftEditorコンテンツ
• .public-DraftEditorPlaceholderルート
• .public- DraftEditorPlaceholderインナー
• .public-DraftStyleDefaultブロック

Here's a fiddleが表示されます。そして、ここではフィドルに使用されているスタイルです：

.DraftEditor-root, 
.DraftEditor-editorContainer, 
.public-DraftEditor-content { 
    padding: 5px; 
    margin: 5px; 
} 

.public-DraftEditorPlaceholder-root { 
    margin-top: 28px; 
    margin-left: 25px; 
} 

.public-DraftEditorPlaceholder-inner { 
    background: rgba(0, 0, 0, .5); 
    color: white; 
} 

.DraftEditor-root { 
    border: 1px solid black; 
} 

.public-DraftEditor-content { 
    border: 1px solid blue; 
} 

.DraftEditor-editorContainer { 
    border: 1px solid green; 
} 

.public-DraftStyleDefault-block { 
    border: 1px solid red; 
    margin: 5px 0; 
} 

草案はまた、出力テキストの配置などに応じて、いくつかのより多くのクラス名は、私は、例えば内の要素を検査することをお勧めしたいでしょうChrome DevToolsを使用して利用可能なものを確認します。