Material-ui: Может ли withStyles передавать реквизиты объекту стилей?

Вероятно, мы сможем решить эту проблему, создав Material-UI, используя тот же контекстный ключ, что и response-jss: https://github.com/cssinjs/theming/blob/master/src/channel.js#L1.
Также обратите внимание на # 7633.

У меня есть PR с примером взаимодействия с react-jss. Я добавлю это в документы. cc @kof

@oliviertassinari означает ли разрешение этого, что теперь должно быть возможно получить доступ к реквизитам в определении стилей? Мне непонятно, как ...

@pelotom нет, withStyles не имеет доступа к свойствам. Но учитывая, сколько людей просят об этой функции. Это то, что я могу расставить по приоритетам после исправления ошибок. Вы можете использовать injectSheet HOC, но он открывает дверь для нескольких проблем: утечка памяти, прерывание горячей перезагрузки, отсутствие композиции classes , отсутствие доступа к внутренним ссылкам, нарушение обработки вложенности тем. По крайней мере, это некоторые из проблем, с которыми я сталкивался в прошлом, и которые побудили меня переписать. Думаю, что постепенно эти вопросы будут решаться.

@oliviertassinari Очень обнадеживает то, что вы первую очередь ! Это упростило бы настройку компонентов. Например, я хотел бы иметь флажок с настраиваемым размером (т.е. шириной и высотой в пикселях):

<CustomCheckbox size={16} />

Если бы мы могли получить доступ к props в styles , это было бы очень просто:

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) в стиль для backgroundImage

Я бы обернул 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://codesandbox.io/s/k2y01rj3w7

(Я удивлен ^ работает без каких-либо ThemeProvider и JssProvider настроенных https://codesandbox.io/s/q6v7krx6, ах, он инициализирует его)

@caub Это работает, но с этим шаблоном нужно быть осторожным. Введенный CSS будет расти с увеличением количества экземпляров компонента. Это дубликат № 7633. Не вникал в тему. Но я считаю, что версия

@caub Спасибо, что поделились!

@oliviertassinari есть https://github.com/cssinjs/react-jss/blob/master/readme.md#dynamic -values ​​в react-jss, интересно, почему его нельзя использовать в material-ui? Также я понимаю вашу точку зрения, когда вы говорите, что встроенный style prop идеально подходит для динамических значений, но лучше иметь все определения стилей в одних и тех же местах. Также есть https://github.com/airbnb/react-with-styles, который будет обрабатывать className и style для более эффективных динамических стилей.

Я столкнулся с той же проблемой, может кто-нибудь мне помочь
`импортировать React из 'реагировать';
импортировать PropTypes из 'prop-types';
импортировать {withStyles} из 'material-ui / styles';
импортировать ящик из 'material-ui / Drawer';
импортировать AppBar из 'material-ui / AppBar';
импортировать панель инструментов из 'material-ui / Toolbar';
импортировать список из 'material-ui / List';
импортировать типографику из 'material-ui / Typography';
импортировать IconButton из 'material-ui / IconButton';
import Hidden из 'material-ui / Hidden';
импортировать разделитель из 'material-ui / Divider';
импортировать MenuIcon из 'material-ui-icons / Menu';
импортировать {mailFolderListItems, otherMailFolderListItems} из './tileData';

const drawerWidth = 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')]: {
дисплей: 'нет',
},
},
drawerHeader: theme.mixins.toolbar,
drawerPaper: {
ширина: 250,
[theme.breakpoints.up ('md')]: {
ширина: drawerWidth,
позиция: 'относительная',
высота: '100%',
},
},
содержание: {
backgroundColor: theme.palette.background.default,
ширина: '100%',
заполнение: theme.spacing.unit * 3,
height: 'calc (100% - 56px)',
marginTop: 56,
[theme.breakpoints.up ('sm')]: {
height: 'calc (100% - 64px)',
marginTop: 64,
},
},
});

экспортный класс ResponsiveDrawer расширяет React.Component {
state = {
mobileOpen: ложь,
};

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 (стили) (ResponsiveDrawer);
`

Введенный CSS будет расти с увеличением количества экземпляров компонента.

CSS, внедренный @oliviertassinari, будет расти + - так же, как html будет расти со встроенными стилями. Статические стили отображаются на отдельных листах и ​​повторно используются во всех экземплярах компонентов.

Мне это понравилось, хотя с компонентом без сохранения состояния он повторно отобразит 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 Это работает, но довольно болезненно, я попробую изменить withStyles , чтобы использовать более напрямую https://github.com/cssinjs/react-jss, который может передавать реквизиты в значениях

@SrikanthChebrolu, не могли бы вы переместить свое сообщение в другой выпуск, если он не по теме?

Просто любопытно, каков статус по этому поводу? Я читал эту проблему, документы JSS, документы material-ui, но все же нашел решение для Mui + Jss + TypeScript, которое не требует от меня использования встроенных стилей. Добавление нескольких встроенных стилей иногда неизбежно, но в моем случае есть несколько стилей, которые имеют много разных состояний, и все они зависят от темы и реквизита вместе: разочарован:

@chazsolo Привет, Чаз, ты действительно можешь использовать injectSheet из react-jss вместо withStyles из mui . Таким образом у вас могут быть как 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 - подписались и отказались от примера 209d.

@ up209d
К сожалению, я не думаю, что это сработает для меня - я реализовал то, что вы предложили, и я вижу свойства внутри вызова функции внутри объекта styles , но я продолжаю получать ошибки. Я просто скучаю по типам? Я расширяю WithStyles в интерфейсах props, поэтому у меня есть доступ к объекту classes в props (теперь мне интересно, указана ли эта проблема в 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 Привет, Чаз, я не уверен, но это то, что вы хотите получить доступ к classes внутри props объекта style . Если это так, я думаю, что это невозможно, поскольку 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'd, а не в базовые компоненты.

Все это поддерживается react-jss , разве это не поддерживается изначально material-ui ?

Кроме того, я думаю, что проблема @ jdolinski1 в том, что ваш код не распространяет children может иметь обернутый компонент.

@iamthuypham Я думаю, что это не рекомендуется делать, поскольку я делал это раньше, и вы можете столкнуться с низкой производительностью, если приложение будет расти очень скоро. Создание нового экземпляра component с новым объектом jss style не очень хорошо с точки зрения принципа кодирования, потому что объект style должен быть полностью повторно отрисован снова и снова, каждый раз за смену props . Использование injectSheet из react-jss - лучший выбор. Если вы посмотрите на injectSheet вы увидите, что он разбивает ваш объект style на 2 части ( static & dynamic ), поэтому только dynamic перерисовывается при изменении props .

как использовать плагины, такие как jss-nested с 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 , с " @ 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 . Работает ли он только с makeStyles и хуками?

@Guardiannw Он работает с любым из API @material-ui/styles .

@oliviertassinari выглядит как допустимый синтаксис, значения fn были добавлены в v10, поэтому либо использовался v9, либо мне нужно воспроизведение кодов и ящика

Хорошо, вот с чем я пробовал. Возможно, придется попробовать еще раз.

@oliviertassinari У меня есть вопрос об использовании @ materia-ui / styles, доступен ли он и для использования в производственной среде ?, в документации указано, что он не работает со стабильной версией, я использую " 3.9.1 ", в представленном вами примере https://github.com/mui-org/material-ui/issues/8726#issuecomment -452047345 есть мощная и полезная функция, которая мне нужна. В этих вопросах я видел много комментариев с другой точки зрения, и мне нравится решение https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636 из @caub , но ваш комментарий о его решение хорошее.

@ 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 })  })

Вы не можете получить доступ к props на верхнем уровне, даже в качестве второго аргумента после theme

Я нашел путь

// 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 Избегайте этого шаблона. Мы предоставляем собственный API в версии 4.

@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 - это перехватчики реакции
• withStyles HOC принимает тот же синтаксис

Используйте либо тот, либо другой, в вашем примере просто удалите makeStyles :

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

Ребята из Gday подумали, что id поделится моим текущим решением со ссылкой на вышеупомянутое обсуждение, надеюсь, это поможет кому-то или кто-то может предложить лучший совет по моему текущему решению. Для моего идентификатора страницы входа в систему используется случайное фоновое изображение, но идентификатор все еще хотел бы сохранить мощность материала ui api. AuthPage - это просто родительский уровень представления, который принимает отдельные компоненты аутентификации (вход, блокировка, забытый пароль, сброс пароля и т. Д.) В качестве дочерних. Может подтверждать при каждом обновлении страницы новую загрузку фона, а также хороший строго типизированный реквизит в AuthPageContainer prop

// 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}
    `}
/>

Или используйте clsx https://www.npmjs.com/package/clsx вместо этого

@caub Ваше решение разрушает порядок имен классов, созданный jss.
Как написано здесь: https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636
Я пытался использовать ваше решение, но решение вашего компонента HOC (withStylesProps) задерживает его вызов withStyles, потому что оно обернуто, поэтому его вызов с помощью classNames не отменяет css.
Нравится: https://codesandbox.io/s/hocs-8uhw1?file=/index.js

фон должен быть # 0000000 и цвет: синий