リアクトツールボックスのコンポーネントが巨大です

Question

私はReact Toolboxで遊んでいますが、コンポーネントが本当に大きくレンダリングされていることに気付いています。ここでは例です：

私は、ツールバーの高さはかなり大きく、これらのチェックボックスであること、正しいことができないことを確信している..よく..私は欠けているものはありますか？ React Toolboxを初めて使うのはこれです。

がの場合は、Layoutコンポーネントと関係がありますか？あなたは文書hereでそれを確認することができます。それは、どのようにこれらの派手なブレークポイントがすべてあるのかを説明することになりますが、私はそれらを実際に実装して使用する方法がわかりません。

Answer 1

「紛失しているものがありますか？」

いいえ、それらはパッケージで定義されているようあなただけreact-toolboxコンポーネントのデフォルトのスタイルを見ている:)

を心配することは何も。

node_modules/react-toolbox/lib/をご覧ください。 のwebpack.config.jsは、これらのスタイルをコンパイルして挿入します（node_modulesは明示的に除外されていないため）。

しかし、もちろんすることができますOVERRIDEプロジェクトで独自の.scssや.cssファイルを定義することによって、これらのデフォルトのスタイル。

すべてのコンポーネントのreact-toolboxは、プロパティclassNameを受け入れます。

あなたは

Styles.cssを（あなたがより多くのことを好きなら.scssで行く）

.myCustomInput { 
    font-size: 10px; 
    height: 12px; 
    background-color: #ccc; 
    padding: 3px 5px; 
} 

AddToDo.jsあなたが引くことができ@Solo

import { Input } from 'react-toolbox'; 
import styles from './styles.css'; 

... 

<Input className={styles.myCustomInput} />