カスタムクラスコンポーネントのスタイルでテーマを使用する方法

debugcn 投稿 Dev

ジロスコープ

クラスベースの自分のコンポーネントの一部でテーマを使用したいと思います。何も動作させることができません。ドキュメントのすべての例は機能コンポーネント用です。基本的にテーマは定義されており、それを使用して独自のコンポーネントのスタイルを設定したいので、繰り返しを避け、より高いレベルでコードを変更すると、どこでも変更されます。

私のApp.js

import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
    palette: {
        primary: {
            light: '#757ce8',
            main: '#3f50b5',
            dark: '#002884',
            contrastText: '#fff',
          },
    },
    overrides: {
        MuiOutlinedInput: {
            disabled: true,
            input: {
                color: 'red'
            }
        }
    }
});

export default class App extends React.Component {
    render() {
        return (
            <ThemeProvider theme={theme}>
                <Nav />
            </ThemeProvider>
        );
    }
}

私の問題ファイル、Nav.js

import React from 'react';
import SearchBar from './SearchBar';
import { makeStyles } from '@material-ui/styles';

const styles = makeStyles(theme => ({
    root: {
        background: theme.background,
    },
  }));

class Nav extends React.Component {
    render() {
        const classes = styles();
        return(
            <div className={classes.root}>
                <SearchBar />
            </div>
        )
    }
}

export default Nav;

ライアン・コグズウェル

makeStylesクラスコンポーネントでは使用できません。makeStyles関数コンポーネントでのみ使用できるカスタムフックを返します。クラスコンポーネントの場合、withStylesを使用して同じ機能をすべて活用できます。withStylesコンポーネントをラップし、classes小道具を注入します。

以下は、質問のコードに基づく実用的な例です。

import React from "react";

import { withStyles } from "@material-ui/core/styles";

class SearchBar extends React.Component {
  render() {
    return <div>My Search Bar</div>;
  }
}

const styles = theme => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.primary.contrastText
  }
});

class Nav extends React.Component {
  render() {
    return (
      <div className={this.props.classes.root}>
        <SearchBar />
      </div>
    );
  }
}
export default withStyles(styles)(Nav);

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

カスタムクラスコンポーネントのスタイルでテーマを使用する方法

カスタムクラスコンポーネントのスタイルでテーマを使用する方法

カスタムマテリアルUIコンポーネントのreactjs（16.13.0）コードで適切なリダイレクトを実行する方法は？

JShellコンソールのIntelliJでカスタムクラスをインポートする方法

spaCyパイプラインでカスタムコンポーネントをベンチマークする最良の方法は何ですか？

角度コンポーネントでカスタムTypeScriptクラスを使用する方法がわからない

スタイル付きコンポーネントでマテリアルシステムを使用するためのより良い方法

反応スタイルのコンポーネントでマテリアルカラーを使用するにはどうすればよいですか？

反応コンポーネント全体でカスタムAPIクライアントを使用するための慣用的な方法は何ですか？

Angular9でカスタムテキストボックスコンポーネントを作成する方法

ZKでコンポーネントラベルをカスタマイズする方法

WordPressのコントロールパネルでテキストをカスタマイズする方法

tornadofxでカスタマイズされたUIコンポーネントを作成するためのベストプラクティスは何ですか？

カスタムフックを使用してReactコンポーネントをテストする方法

React MaterialUIのタブコンポーネントのテキストスタイルをカスタマイズする方法

React MaterialUIのタブコンポーネントのテキストスタイルをカスタマイズする方法

同じコンポーネントでカスタムコンポーネントを複数回使用する方法

LitElement：小さなWebコンポーネント内で多くのカスタムスタイルルールといくつかの動的ルールを作成する場合のベストプラクティス（またはベストパフォーマンス）？

WCFコンテキスト外でPerWcfSessionライフスタイルコンポーネントを使用する

redux形式でカスタムコンポーネントを使用する方法は？

jqueryをwebpackのカスタム要素に埋め込み、webコンポーネントでアクセスする方法。マテリアライズを使用しています

Aframeカスタムコンポーネント、スキーマのカスタムプロパティでエラーが発生する

Angularのコンストラクターで@Injectテキストを使用してコンポーネントをテストする方法

Angularのカスタムコンポーネントコンテンツにスタイルを適用するにはどうすればよいですか？

Laravel 4：AuthコンポーネントにusersテーブルのカスタムIDを使用させる方法

スマートテーブルコンポーネントの角度のカスタムアイコン

角度のあるマテリアルコンポーネントのカスタムセレクター名

反応スタイルのコンポーネントでカスタムアイコンを使用するにはどうすればよいですか？

カスタムスタイルをantdレートコンポーネントに設定する方法

何も壊さずにマテリアルコンポーネントにカスタムスタイルを追加する方法

ReactNativeのスタイル付きコンポーネントカスタムコンポーネントにスタイルを追加する