1

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

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

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

ナビゲーション コンポーネントを含む appbar コンポーネント。

css クラスを appbar コンポーネントに適用しようとしましたが、うまくいきました。

ただし、Navigation コンポーネントの className が機能していないため、その理由を知りたいと考えています。なぜそれはうまくいったのですAppBarかNavigation？何故ですか？

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

ドキュメントには次のことが示されています。

import theme from './PurpleAppBar.scss';

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

export default PurpleAppBar;

しかし、PurpleAppBar.scss とは何で、どのように見えるべきなのでしょうか? カスタムSCSSファイルだと思いますか？

また、私は Web アプリに取り組んでいるので、material-ui は私にとって良い選択肢ではないように思えます。

4

1 に答える 1

1

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

プロパティは、theme最終的なクラスと className の間で一致する className API を実装する形状です。CSS モジュールがあるとします。

.button {
  background-color: red
}

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

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

于 2016-10-12T23:21:19.107 に答える