反応ツールボックスのコンポーネントにテーマを適用する方法

Question

反応して反応するツールボックスは初めてです。反作用ツールボックスはscssを使用します。私はまだscssを知らないので、そのコンポーネントのカスタマイズに関する問題に直面しています。

これは私が持っているものです。

<AppBar fixed flat title="Webocity" className="appBar"> 
    <Navigation type='horizontal' className="navbar" routes={linkroutes}> 
     </Navigation> 
    </AppBar> 

それのナビゲーションコンポーネントとアプリケーションバーコンポーネント。

私はappbarコンポーネントにcssクラスを適用しようとしました。

ただし、ナビゲーションコンポーネントのclassNameが機能していないため、その理由を知りたいと考えています。なぜ、AppBarの場合はNavigationではないのですか？また、appBar CSSの場合、背景のプロパティはオーバーライドされましたが、heightプロパティはオーバーライドされませんでした。何故ですか？

また、これらのコンポーネントにテーマを渡すにはどうすればよいですか？私はそれがSCSSファイルで書かれる必要があることを理解しています。しかし、私はそれのための非常に簡単な例になるかもしれない？

ドキュメントが示しています

import theme from './PurpleAppBar.scss'; 

const PurpleAppBar = (props) => (
    <AppBar {...props} theme={theme} /> 
); 

export default PurpleAppBar; 

しかし、何PurpleAppBar.scssがあるとそれがのようになりますか？カスタムSCSSファイルだと思いますか？

また、私はウェブアプリに取り組んでいますので、material-uiは私にとっては良い選択肢とは言えません。

Answer 1

React ToolboxはCSSモジュールを使用してコンポーネントのスタイルを内部的にスタイル化しています。反応ツールボックスの各コンポーネントは、状態に応じて各DOMノードに割り当てられるclassNamesのAPIを実装します。ドキュメントでAPIを見ることができます。

プロパティは、最終クラスとclassNameの一致でclassName apiを実装するシェイプです。あなたは{ button: 'MyButton--button__1262a' }のようなオブジェクトに解決さCSSモジュール

.button { 
    background-color: red 
} 

を持っていると言います。そのオブジェクトをコンポーネントに渡すと、ボタンclassNameが取得され、対応するノードに設定されます。セレクターの優先順位に注意してください。場合によっては優先度を上げる必要があり、カスタムコンポーネントのルートにclassNameを追加するだけで済みます。ドキュメントにはたくさんの例があり、サンプルのレポも確認できます。

CSSモジュールを使用したくない場合でも、モジュールのハードコーディングテーマを実装できます。たとえば、あなたのCSSに.awesome-buttonクラスを書きたい場合は、{ button: "awesome-button" }というテーマオブジェクトを渡すことができます。詳細はreact-css-themrをご覧ください。