web-dev-qa-db-ja.com

クラスオブジェクトを使用してReactjsで機能的なステートレスコンポーネントをスタイルする方法

ここで説明しているReactJsの機能的なステートレスコンポーネント を作成してスタイルを設定します。

const MyBlueButton = props => {
  const styles = { background: 'blue', color: 'white' };  
  return <button {...props} style={styles} />;
};

問題は、いくつかの ここで説明するステートフルコンポーネントのスタイル を追加することです。

const styles = theme => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
});

問題は、次のようなことをしようとすると：

<div className={classes.root}>

エラーが表示されます：

「クラス」は定義されていませんno-undef

withStylesclassesオブジェクトにアクセスして、rootのスタイルを設定するにはどうすればよいですか？

cssreactjsmaterial-uijsx
7
Mowzer

ここで理解できたのは、機能コンポーネントを使用してこれを行う方法です。

const styles = theme => ( {
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
} );

const App = ( props ) => {
  const { classes } = props;
  return <div className={classes.root}>Foo</div>;
};

export default withStyles( styles )( App );
14
devserkan