Material-ui: withStylesは小道具をスタイルオブジェクトに渡すことができますか？

おそらく、react-jssと同じコンテキストキーを使用してMaterial-UIを作成することで問題に対処できるはずです： //github.com/cssinjs/theming/blob/master/src/channel.js#L1。
また、＃7633をご覧ください

私は、react-jssの相互運用性の例を備えたPRの準備ができています。 それをドキュメントに追加します。 cc @kof

@oliviertassinariこれの解決は、スタイル定義内の小道具にアクセスできるようになるはずであることを意味しますか？ どのように私には明らかではありません...

@pelotomいいえ、withStylesはプロパティにアクセスできません。 しかし、どれだけの人がこの機能を求めているかを考えると。 バグ修正後、これは私が優先できるものです。 injectSheet HOCを使用できますが、メモリリーク、ホットリロードの失敗、 classes構成の欠如、内部参照アクセスの欠如、テーマのネスト処理の失敗など、複数の問題への扉が開かれます。 少なくとも、それは私が過去に直面し、私の書き直しの動機となった問題のいくつかです。 これらの問題は段階的に解決されると思います。

@oliviertassinariこれを優先することを検討すると聞いて非常に安心です！ これにより、コンポーネントのカスタマイズがはるかに簡単になります。 たとえば、設定可能なサイズ（ピクセル単位の幅と高さ）のチェックボックスが必要です。

<CustomCheckbox size={16} />

styles propsにアクセスできれば、これは非常に簡単です。

const styles = {
  root: {
    width: props => props.size,
    height: props => props.size
  }
}

また

const styles = props => ({
  root: {
    width: props.size,
    height: props.size
  }
})

その後：

const CustomCheckbox = ({size, classes}) => <Checkbox className={classes.root} />;

export default withStyles(styles)(CustomCheckbox);

今のところ、これらのタイプのユースケースにどのように取り組むべきかについての推奨事項はありますか？ または、withStylesを使用しているときに小道具にアクセスするためのサポートをいつ追加できるかについての見積もりはありますか？

@nmchavesユースケースは、インラインスタイルのアプローチに完全に当てはまるようです。ドキュメントでそれについて少し見つけることができます。 よくある質問
https://github.com/callemall/material-ui/blob/75a30061e76eae93c711ec202a2c7e4238a4f19a/docs/src/pages/style/SvgIcons.js#L38 -L44

ありがとう@oliviertassinari ！ withStylesを使用してこれを達成できることを望んでいましたが、インラインスタイルはうまく機能します。 そして、あなたがここ+ドキュメントでそれを推奨しているという事実は、私がこの決定に非常に自信を持っていると感じさせます。 再度、感謝します！

背景画像のスタイルに小道具（画像src）を渡すことができると便利です

withStyleラップします

const withStylesProps = styles =>
  Component =>
    props => {
      console.log(props);
      const Comp = withStyles(styles(props))(Component);
      // return <div>lol</div>;
      return <Comp {...props} />;
    };

const styles = props => ({
  foo: {
    height: `${props.y || 50}px`,
  }
});

export default withStylesProps(styles)(
  props => (
    <div className={props.classes.foo} style={{ ...props.style, background: 'yellow' }}>
      <h1>Hello!</h1>
    </div>
  )
);

デモ： https ：

（私は驚いています^ ThemeProviderとJssProvider設定しなくても動作しますhttps://codesandbox.io/s/q6v7krx6、ああそれはそれを初期化します）

@caub動作していますが、このパターンには注意する必要があります。 挿入されたCSSは、コンポーネントのインスタンスの数とともに増加します。 ＃7633の複製です。 私はそのトピックを掘り下げていません。 しかし、 @ kofバージョンはパフォーマンスの最適化を使用していると

@caub共有してくれてありがとう！

@oliviertassinariこのhttps://github.com/cssinjs/react-jss/blob/master/readme.md#dynamic-valuesがreact-jssにありますが、なぜmaterial-uiで使用できなかったのでしょうか。 また、インラインstyle小道具は動的な値に最適であるとあなたが言っている点も理解していますが、すべてのスタイルの定義を同じ場所に配置する方がよいでしょう。 より効率的な動的スタイルのためにclassNameとstyleを処理するhttps://github.com/airbnb/react-with-stylesもあります

私は同じ問題に直面しています誰かが私を助けることができます
`import React from'react ';
'prop-types'からPropTypesをインポートします。
import {withStyles} from'material-ui / styles ';
'material-ui / Drawer'からドロワーをインポートします。
'material-ui / AppBar'からAppBarをインポートします。
'material-ui / Toolbar'からツールバーをインポートします。
'material-ui / List'からリストをインポートします。
'material-ui / Typography'からタイポグラフィをインポートします。
'material-ui / IconButton'からIconButtonをインポートします。
'material-ui / Hidden'から非表示をインポートします。
'material-ui / Divider'からDividerをインポートします。
'material-ui-icons / Menu'からMenuIconをインポートします。
import {mailFolderListItems、otherMailFolderListItems} from './ tileData';

constdrawerWidth = 240;

const styles = theme =>（{
根： {
幅：「100％」、
高さ：430、
marginTop：theme.spacing.unit * 3、
zIndex：1、
オーバーフロー： '非表示'、
}、
appFrame：{
位置： '相対'、
表示： 'フレックス'、
幅：「100％」、
高さ：「100％」、
}、
appBar：{
位置： '絶対'、
marginLeft：drawerWidth、
[theme.breakpoints.up（ 'md'）]：{
幅： calc(100% - ${drawerWidth}px) 、
}、
}、
navIconHide：{
[theme.breakpoints.up（ 'md'）]：{
表示： 'なし'、
}、
}、
引き出しヘッダー：theme.mixins.toolbar、
引き出し紙：{
幅：250、
[theme.breakpoints.up（ 'md'）]：{
幅：drawerWidth、
位置： '相対'、
高さ：「100％」、
}、
}、
コンテンツ： {
backgroundColor：theme.palette.background.default、
幅：「100％」、
パディング：theme.spacing.unit * 3、
高さ： 'calc（100％-56px）'、
marginTop：56、
[theme.breakpoints.up（ 'sm'）]：{
高さ： 'calc（100％-64px）'、
marginTop：64、
}、
}、
}）;

エクスポートクラスResponsiveDrawerはReact.Componentを拡張します{
状態= {
mobileOpen：false、
};

handleDrawerToggle =（）=> {
this.setState（{mobileOpen：！this.state.mobileOpen}）;
};

与える（） {
const {クラス、テーマ} = this.props;

const drawer = (
  <div>
    <div className={classes.drawerHeader} />
    <Divider />
    <List>{mailFolderListItems}</List>
    <Divider />
    <List>{otherMailFolderListItems}</List>
  </div>
);

return (
  <div className={classes.root}>
    <div className={classes.appFrame}>
      <AppBar className={classes.appBar}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            onClick={this.handleDrawerToggle}
            className={classes.navIconHide}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" noWrap>
            Responsive drawer
          </Typography>
        </Toolbar>
      </AppBar>
      <Hidden mdUp>
        <Drawer
          variant="temporary"
          anchor={theme.direction === 'rtl' ? 'right' : 'left'}
          open={this.state.mobileOpen}
          classes={{
            paper: classes.drawerPaper,
          }}
          onClose={this.handleDrawerToggle}
          ModalProps={{
            keepMounted: true, // Better open performance on mobile.
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <Hidden smDown implementation="css">
        <Drawer
          variant="permanent"
          open
          classes={{
            paper: classes.drawerPaper,
          }}
        >
          {drawer}
        </Drawer>
      </Hidden>
      <main className={classes.content}>
        <Typography noWrap>{'You think water moves fast? You should see ice.'}</Typography>
      </main>
    </div>
  </div>
);

}
}

ResponsiveDrawer.propTypes = {
クラス：PropTypes.object.isRequired、
テーマ：PropTypes.object.isRequired、
};

デフォルトのwithStyles（styles）（ResponsiveDrawer）;をエクスポートします。
`

挿入されたCSSは、コンポーネントのインスタンスの数とともに増加します。

@oliviertassinariが注入されたCSSは+

私はこれが好きでしたが、ステートレスコンポーネントを使用すると、 withStyleがrenderからrenderに再レンダリングされますが、完全に純粋なコンポーネントを使用することで回避できます。

import React from 'react';
import {
  withStyles,
  Grid,
  CircularProgress
} from 'material-ui';

const PreloadComponent = props => {
  const { classes,size } = props;
  return (
    <Grid className={classes.container} container justify={'center'} alignItems={'center'}>
      <CircularProgress size={size}/>
    </Grid>
  )
};

const StyleWithThemeProps = (props) => {
  return withStyles(theme => ({
    container: {
      paddingTop: props.size*2 || 50,
      paddingBottom: props.size*2 || 50,
    }
  }),{withTheme: true})(PreloadComponent)
};

const Preload = props => {
  const { size } = props;
  const WithStylesPreloadComponent = StyleWithThemeProps(props);
  return (
    <WithStylesPreloadComponent {...props}/>
  )
};

Preload.defaultProps = {
  size: 20
};

export default Preload;

完全に純粋なコンポーネントを使用して、更新を回避できます

const PreloadComponent = props => {
  const { classes,size } = props;
  return (
    <Grid className={classes.container} container justify={'center'} alignItems={'center'}>
      <CircularProgress size={size}/>
    </Grid>
  )
};

const StyleWithThemeProps = (props) => {
  return withStyles(theme => ({
    container: {
      paddingTop: props.size*2 || 50,
      paddingBottom: props.size*2 || 50,
    }
  }),{withTheme: true})(PreloadComponent)
};

class PreloadFull extends React.PureComponent {

  constructor(props,context) {
    super(props);
  }

  componentWillMount() {
    this.StyledPreloadFull = StyleWithThemeProps(this.props);
  }

  componentWillUpdate(nextProps) {
    this.StyledPreloadFull = StyleWithThemeProps(nextProps);
  }

  render() {
    const { StyledPreloadFull,props } = this;
    return (
      <StyledPreloadFull {...props}/>
    );
  }
}

PreloadFull.defaultProps = {
  size: 20
};

export default PreloadFull;

@ up209d動作しますが、かなり苦痛です。値で小道具を渡すことができるhttps://github.com/cssinjs/react-jssをより直接的に使用するために、 withStylesを変更しようとします。

@SrikanthChebroluトピックではないので、メッセージを別の問題に移動できますか？

これのステータスがどうなっているのか知りたいですか？ 私はこの問題、JSSドキュメント、material-uiドキュメントを読んでいますが、インラインスタイルを使用する必要のないMui + Jss + TypeScriptのソリューションをまだ見つけていません。 いくつかのインラインスタイルを配置することは避けられない場合がありますが、私の場合、多くの異なる状態を持つ複数のスタイルがあり、すべてテーマと小道具に依存しています：失望：

@chazsoloねえチャズ、実際にはmuiのwithStyles代わりに、 react-jss injectSheetを使用できます。 このようにして、 propsとtheme両方を持つことができます。

import injectSheet from 'react-jss';

const styles = theme => ({
  container: {
     color: props => theme.palette[props.color || 'primary'].main
  }
});

...

export default injectSheet(styles)(AnyComponent);

import { JssProvider, jss, createGenerateClassName } from 'react-jss/lib';
import { MuiThemeProvider } from 'material-ui';

const generateClassName = createGenerateClassName();

...

<JssProvider jss={jss} generateClassName={generateClassName}>
  <MuiThemeProvider theme={props.theme} sheetsManager={new Map()}>
    <App/>
  </MuiThemeProvider>
</JssProvider>

@chazsoloこの問題をフォローしたいと思いますhttps://github.com/cssinjs/jss/issues/682

@kofと@ up209dに感謝します-購読してup209dの例を試してみてください。

@ up209d
残念ながら、それは私にはうまくいかないと思います-私はあなたが提案したものを実装しました、そして私はstylesオブジェクト内の関数呼び出し内の小道具を見ることができます、しかし私はエラーを受け取り続けます。 IAm私はタイプが足りないだけですか？ 小道具のインターフェースでWithStylesを拡張しているので、小道具のclassesオブジェクトにアクセスできます（これがhttps://github.com/mui-で参照されている問題かどうか疑問に思っています。 org / material-ui / issues / 8726＃issuecomment-337482040）

TS2344: Type '(theme: ITheme) => { arc: { stroke: string; strokeWidth: (props: any) => string | number; }; arcM...' does not satisfy the constraint 'string | Record<string, CSSProperties> | StyleRulesCallback<string>'.
  Type '(theme: ITheme) => { arc: { stroke: string; strokeWidth: (props: any) => string | number; }; arcM...' is not assignable to type 'StyleRulesCallback<string>'.
    Type '{ arc: { stroke: string; strokeWidth: (props: any) => string | number; }; arcMovement: { strokeDa...' is not assignable to type 'Record<string, CSSProperties>'.
      Property 'arc' is incompatible with index signature.
        Type '{ stroke: string; strokeWidth: (props: any) => string | number; }' is not assignable to type 'CSSProperties'.
          Types of property 'strokeWidth' are incompatible.
            Type '(props: any) => string | number' is not assignable to type 'string | number | undefined'.
              Type '(props: any) => string | number' is not assignable to type 'number'.

私のテーマは次のようになります：

import { ITheme } from '...';

export default (theme: ITheme) => ({
  arc: {
    // ...
    strokeWidth: (props: any): number | string => {
      // this logs the correct data I'm expecting
      console.log(props.data[0].properties.name)
      return 1.5
    }
  },
  arcMovement: {
    // ...
  },
})

これが興味深いのは、コンポーネント内でclassesオブジェクトを使用する場合、 arcとarcMovementが有効なプロパティであるということです。

// from Chrome console
{
  arc: "Arcs-arc-0-2-1 Arcs-arc-0-2-3",
  arcMovement: "Arcs-arcMovement-0-2-2"
}

アップデート

私はこれを機能させることができましたが、上記のコメントに記載されているように、 WithStyles 、 withStylesへのすべての参照を削除する必要があり、 classes構成とテーマが失われました入れ子。 今から休憩して、スレッドに注目します。 すべての助けをありがとう！

@chazsoloちょっとチャズ、styleオブジェクトのprops内のclassesにアクセスしたいということです。 もしそうなら、 classesはjssがstyleオブジェクトを処理した後にのみ利用可能になるため、不可能だと思います。作成プロセスの前にclassesにアクセスするにはどうすればよいですか。 classesもトリガーされていませんか？

@caubはすでに解決策を提供していると思います。 少しひねりを加えてソリューションを再投稿するだけです。 追加のライブラリは必要ありません。

独自のラッパーwithStylesPropsます。

import { withStyles } from 'material-ui/styles';

const styles = ( theme, props ) => ({
    exampleStyle: {
           color: 'red'  // <-- or try theme.palette.primary[600]
    }
})

const withStylesProps = ( styles ) =>
  Component =>
    props => {
      const Comp = withStyles(theme => styles(theme, props))(Component);
      return <Comp {...props} />;
    };

const YourComponent = ({  classes }) => 
      <Typography type="display4" className={classes.exampleStyle}>{type}</Typography>

export default withStylesProps(styles)(YourComponent);

コンポーネントごとにwithStylesPropsを作成したくない場合は、別のファイルに追加して、好きな場所にインポートしてみてください。

@iamthuyphamヒントをありがとう。 ただし、コンポーネントをwithStylesPropsでラップすると、ラップされたコンポーネント内のどこかで使用している遷移コンポーネント<Collapseのアニメーションが機能しなくなります。

@ jdolinski1コード例をコピーして貼り付けることはできますか？

@iamthuyphamソリューションには、コンポーネントが作成されるたびに新しい<style>タグが作成されるという欠点があります。 また、defaultPropsを使用するときは注意して、基本コンポーネントではなくHOCされたコンポーネントに追加することもできます。

これらはすべてreact-jssでサポートされていますが、 material-uiネイティブにサポートすることはできませんか？

また、 @ jdolinski1の問題は、ラップされたコンポーネントが持つ可能性のあるchildrenコードが伝播しないことだと思います。

@iamthuypham以前はそうしていたので、そうすることはお勧めできません。アプリがすぐに成長する限り、パフォーマンスが低下する可能性があります。 新しいインスタンスの作成component新しいJSSとstyleため、オブジェクトは、原則コーディングの用語では良くありませんstyle何度も何度も、完全に再描画されなきゃオブジェクト、すべてのprops変更あたりの時間。 使用してinjectSheetからreact-jssより良い選択です。 injectSheetを調べると、 styleオブジェクトが2つの部分（ staticとdynamic ）に分割されているので、 dynamicだけであることがわかります。 props変更されると、 dynamicが再レンダリングされます。

jssなどのプラグインを使用する方法-injectSheetでネストされていますか？

injectSheetを使用すると、「＆：hover」ステートメントを機能させることができません。
withStylesでは小道具にアクセスできません...

@koutsenkoここに例があります：

import React from "react";
import { makeStyles } from "@material-ui/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  root: {
    background: props => props.color,
    "&:hover": {
      background: props => props.hover
    },
    border: 0,
    borderRadius: 3,
    color: "white",
    height: 48,
    padding: "0 30px"
  }
});

export default function Hook() {
  const classes = useStyles({
    color: "red",
    hover: "blue"
  });
  return <Button className={classes.root}>Hook</Button>;
}

https://codesandbox.io/s/pw32vw2j3m

お役に立てば幸いです。

うわー、それは私たちが〜1年で成し遂げた驚くべき進歩です😍。

では、どのようにそれをタイプスクリプトしますか？

@stunaz良い質問です。 わからない。 私はそれを調べていません。 @ eps1lonは、モジュールのTypeScript定義を実行しました。 出発点としてご利用いただけます。
https://github.com/mui-org/material-ui/blob/f4281a77d15b0d6eec9d33cdc358cfb89844996d/packages/material-ui-styles/src/index.d.ts#L72

@koutsenkoここに例があります：

@oliviertassinariに感謝しreact @ next 」で動作するようになりました。

@koutsenko jss-nested機能させることができなかった場合、それはコーディングのどこかにある構成の問題であるに違いありません。 jss-nestedはjss-default-presetに含まれているので、oobで動作します

https://stackblitz.com/edit/react-py6w2v

@oliviertassinari

小道具を使用して、特定のセレクターのスタイルオブジェクト全体を設定することもできますか？ 条件付きでプロパティを適用できる場所はどこですか？

たとえば、このように

withStyles({
    root: {
        '& > path': (props) => {
            if(props.color)
                return {
                    fill: props.color
                };
           return {};
        }
    }
})

そのため、小道具が存在しない場合は、設定する必要のある他の値ではなく、前の塗りつぶし値を使用しますか？ たとえば、通常は塗りつぶしに適用される他のルールがありますが、 colorプロパティが設定されている場合にのみ、この新しい塗りつぶしプロパティを設定したいと思います。

ありがとう！

@Guardiannw何らかの理由で、バリアントが機能しません。 たぶん@kofはなぜ💡なのかについて私たちの光を上げることができます。 次のいずれかを実行できます。

// 🏆
const useStyles = makeStyles({
  root: {
    "& > span": {
      backgroundColor: props => props.color || null,
    }
  }
});

// or 

const useStyles = makeStyles({
  root: props => ({
    "& > span": {
      backgroundColor: props.color || null
    }
  })
});

@oliviertassinari withStyles関数を使用する2番目のオプションを取得するのに苦労しています。 makeStylesとフックでのみ機能しますか？

@Guardiannw @material-ui/stylesのAPIのいずれかで動作しています。

@oliviertassinariは有効な構文のように見えます

わかりました、それは私がそれを試したものです。 再試行する必要があるかもしれません。

@oliviertassinari @ materia-ui / stylesの使用について質問がありますが、本番環境で使用できますか？ドキュメントでは、安定バージョンでは機能しないことが示されています。「 3.9.1 "、あなたが提示する例https://github.com/mui-org/material-ui/issues/8726#issuecomment -452047345には、私が必要とする強力で便利な機能があります。 これらの問題では、さまざまな観点から多くのコメントがあり、@ caubのソリューションhttps://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636も気に入っていますが、彼についてのコメントは解決策は良いです。

@ contrerasjf0 @material-ui/stylesは、アルファリリースとしてのみ利用可能です。 アルファ版は、reactエコシステムのほとんどのパッケージと同じように扱います。 本番環境ではアルファパッケージを使用しないことをお勧めします。 そうした場合、リリース間でバグや重大な変更が発生する可能性があります。つまり、チャーンアルファバージョンの追加を処理できるはずです。

私が望んでいるのは、人々がこれらのバージョンを趣味のプロジェクトで使用するか、本番環境にデプロイされていないが本番環境のブランチと同じようにテストされている別のブランチで使用することです。 これらのアルファ版を使用し、フィードバックを提供してくださった皆様に感謝いたします。

@ up209dはい、あなたのソリューションは機能しますが、
styles = { name: { cssprop: props => {} }表記であり、
styles = props => ({ name: { cssprop: {} })

また、JssProviderは必要ありません。

@koutsenko

// at value level:
styles = { name: { cssprop: props => value }
styles = theme => ({ name: { cssprop: props => value })

// at class name level
styles = { name: props => ({ cssprop: value })  }
styles = theme => ({ name: props => ({ cssprop: value })  })

theme後の2番目の引数としても、トップレベルでpropsアクセスすることはできません。

私は方法を発見しました

// MyComponent.tsx
import React, { PureComponent } from 'react';
import { myComponentWithStyles } from './myComponentWithStyles';

export interface MyComponentProps {
  copy: string;
  size?: number;
}

export class Twemoji extends PureComponent<myComponentWithStyles> {
  public render() {
    const { copy, classes } = this.props;

    return (
      <div className={classes.message}>
        {copy}
        <img src="https://via.placeholder.com/150" />
    </div>
    );
  }
}

// myComponentWithStyles.tsx
import React from 'react';
import { withStyles, WithStyles, Theme } from '@material-ui/core';
import { MyComponent, MyComponentProps } from './my-component';

const styles = (props: Theme & MyComponentProps) => ({
  message: {
    fontSize: props.typography.caption.fontSize,
    'box-sizing': 'content-box',
    '& img': {
      width: `${props.size || 24}px`,
      height: `${props.size || 24}px`,
      padding: '0 4px',
      verticalAlign: 'middle',
    },
  },
});

export type myComponentWithStyles = WithStyles<any>;

export const Component = (props: MyComponentProps) => {
  const StyledComponent = withStyles((theme: Theme) => styles({ ...props, ...theme }))(
    MyComponent
  );

  return <StyledComponent {...props} />;
};



md5-d0e1b51e375682cf2aad9c4d66b6c73a



<Component size={12} />

@ andreasonny83このパターンは避けてください。 v4でネイティブAPIを提供しています。

@oliviertassinari更新してくれてありがとう。 そのパターンはすでに利用可能ですか？ 利用可能なドキュメントはありますか？

https://next.material-ui.com/css-in-js/basics/#adapting -based-on-props

最後の質問@oliviertassinari 。 makeStylesをwithStylesと組み合わせて使用​​できますか？

そのためのドキュメントが見つかりません。 私がやろうとしていることはこれです：

const useStyles = makeStyles({
  message: {
    boxSizing: 'content-box'
  }
});

export const ComponentWithStyles = withStyles(useStyles())(MyComponent);

@ andreasonny83

• makeStylesはreact-hook用です
• withStyles HOCは同じ構文を受け入れます

どちらか一方を使用します。この例では、 makeStyles削除するだけです。

const styles = { message: {boxSizing: 'content-box', background: props => props.bg} };
export const ComponentWithStyles = withStyles(styles)(MyComponent);

Gdayの人々は、上記の議論を参照して、idが私の現在の解決策を共有していると考えました。うまくいけば、誰かまたは誰かが私の現在の解決策についてより良いアドバイスを提供できるようになります。 私のサインインページIDは、ランダムな背景画像のようですが、IDは依然としてマテリアルUIAPIのパワーを維持したいと考えています。 AuthPageは、個々の認証コンポーネント（サインイン、ロック、パスワードを忘れた、パスワードのリセットなど）を子として受け取る親プレゼンテーション層にすぎません。 各ページを更新するたびに、AuthPageContainerプロップ内の新しいバックグラウンドロードと強く型付けされたプロップを確認できます

// AuthPage.styles.tsx

import { Container } from "@material-ui/core";
import { ContainerProps } from "@material-ui/core/Container";
import { withStyles } from "@material-ui/core/styles";
import React from "react";

interface IAuthContainerProps extends ContainerProps {
  background: string;
}

export const AuthContainer = withStyles({
  root: props => ({
    alignItems: "center",
    backgroundImage: `url(${props.background})`,
    backgroundPosition: "50% 50%",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    display: "flex",
    height: "100vh",
    justifyContent: "center",
    margin: 0,
    padding: 0,
    width: "100%"
  })
})((props: IAuthContainerProps) => <Container maxWidth={false} {...props} />);

// AuthPage.tsx

import React from "react";
import forest from "../../assets/backgrounds/forest.jpg";
import sky from "../../assets/backgrounds/sky.jpg";
import uluru from "../../assets/backgrounds/uluru.jpg";
import { AuthContainer } from "./AuthPage.styles";

const AuthPage = ({ children }) => {
  const generateBackground = () => {
    const backgrounds = [forest, sky, uluru];
    const index = Math.floor(Math.random() * backgrounds.length);
    return backgrounds[index];
  };

  return (
    <AuthContainer background={generateBackground()}>{children}</AuthContainer>
  );
};

export default AuthPage;

単に次のようなことをしてください：

// styles.js
export default theme => ({
    root: props => ({
        // some styles
    }),
    ...
});

//container.js
export default withStyles(styles)(MyComponent);

状態も渡すのはどうですか？

@ luky1984
できません。 代わりに、次のことを行うことができます。

// Component.js
<Button
    className={`
        ${classes.button} 
        ${this.state.isEnable
            ? classes.enable
            : classes.disable}
    `}
/>

または、代わりにclsxhttps ： //www.npmjs.com/package/clsxを使用して

@caubソリューションは、jssで生成されたクラス名の順序を台無しにします。
ここに書かれているように： https ：
私はあなたのソリューションを使おうとしましたが、HOCコンポーネント（withStylesProps）ソリューションはラップされているため、withStylesの呼び出しを遅らせます。そのため、classNamesで呼び出すとcssがオーバーライドされません。
いいね： https ： index.js

背景は＃0000000、色は青である必要があります