Material-ui: WithStyles pode passar adereços para objetos de estilos?

Provavelmente devemos ser capazes de resolver o problema criando Material-UI usando a mesma chave de contexto que react-jss: https://github.com/cssinjs/theming/blob/master/src/channel.js#L1.
Além disso, dê uma olhada em # 7633

Eu tenho um PR pronto com um exemplo de interoperabilidade react-jss. Vou adicionar isso aos documentos. cc @kof

@oliviertassinari a resolução disso significa que agora deve ser possível obter acesso aos adereços dentro da definição de estilos? Não está claro para mim como ...

@pelotom não, withStyles não tem acesso às propriedades. Mas dado o quanto as pessoas estão pedindo esse recurso. É algo que posso priorizar, após as correções de bugs. Você pode usar o injetSheet HOC, mas ele abre a porta para vários problemas: vazamento de memória, recarregamento a quente quebrado, nenhuma composição de classes , nenhum acesso interno de referência, tratamento de aninhamento de tema quebrado. Pelo menos, são alguns dos problemas que enfrentei no passado e motivaram minha reescrita. Acho que passo a passo essas questões serão abordadas.

@oliviertassinari É muito reconfortante saber que você vai priorizar isso! Isso tornaria muito mais fácil personalizar os componentes. Por exemplo, gostaria de ter uma caixa de seleção com um tamanho configurável (ou seja, largura e altura em pixels):

<CustomCheckbox size={16} />

Se pudéssemos acessar props em styles , isso seria muito simples:

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

ou

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

e então:

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

export default withStyles(styles)(CustomCheckbox);

Por enquanto, você tem alguma recomendação sobre como devemos abordar esses tipos de casos de uso? Ou você tem alguma estimativa de quando poderá adicionar suporte para acessar adereços ao usar withStyles?

@nmchaves Seu caso de uso parece se encaixar perfeitamente na abordagem de estilo embutido, você pode encontrar um pouco sobre isso na documentação. Perguntas frequentes
https://github.com/callemall/material-ui/blob/75a30061e76eae93c711ec202a2c7e4238a4f19a/docs/src/pages/style/SvgIcons.js#L38 -L44

Obrigado @oliviertassinari ! Eu esperava poder fazer isso usando withStyles , mas os estilos embutidos funcionarão muito bem. E o fato de você estar recomendando aqui + na documentação me deixa muito confiante com essa decisão. Obrigado novamente!

seria bom poder passar um adereço (src de imagem) para o estilo de um backgroundImage

Eu embrulharia 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>
  )
);

demonstração: https://codesandbox.io/s/k2y01rj3w7

(Estou surpreso que ^ funciona sem ThemeProvider e JssProvider configurados https://codesandbox.io/s/q6v7krx6, ah, ele inicializa)

@caub Está funcionando, mas você precisa ser cauteloso com esse padrão. O CSS injetado aumentará com o número de instâncias do componente. É uma duplicata de # 7633. Eu não cavei no assunto. Mas acredito que a versão @kof usa alguma otimização de desempenho.

@caub Obrigado por compartilhar!

@oliviertassinari há este https://github.com/cssinjs/react-jss/blob/master/readme.md#dynamic -values ​​em react-jss, eu me pergunto por que não poderia ser usado em material-ui? Também entendo seu ponto onde você diz que style prop em linha é perfeito para valores dinâmicos, mas é melhor ter todas as definições de estilos nos mesmos lugares. Também há https://github.com/airbnb/react-with-styles que lidaria com className e style para estilos dinâmicos mais eficientes

Estou enfrentando o mesmo problema, alguém pode me ajudar
`importar React de 'react';
importar PropTypes de 'prop-types';
import {withStyles} de 'material-ui / styles';
import Drawer de 'material-ui / Drawer';
importar AppBar de 'material-ui / AppBar';
importar barra de ferramentas de 'material-ui / Toolbar';
importar lista de 'material-ui / List';
importar Tipografia de 'material-ui / Typography';
import IconButton de 'material-ui / IconButton';
import Hidden de 'material-ui / Hidden';
importar Divisor de 'material-ui / Divider';
importar MenuIcon de 'material-ui-icons / Menu';
import {mailFolderListItems, otherMailFolderListItems} de './tileData';

const drawerWidth = 240;

estilos const = tema => ({
raiz: {
largura: '100%',
altura: 430,
marginTop: theme.spacing.unit * 3,
zIndex: 1,
estouro: 'escondido',
},
appFrame: {
posição: 'relativa',
display: 'flex',
largura: '100%',
altura: '100%',
},
appBar: {
posição: 'absoluta',
marginLeft: drawerWidth,
[theme.breakpoints.up ('md')]: {
largura: calc(100% - ${drawerWidth}px) ,
},
},
navIconHide: {
[theme.breakpoints.up ('md')]: {
Mostrar nenhum',
},
},
drawerHeader: theme.mixins.toolbar,
drawerPaper: {
largura: 250,
[theme.breakpoints.up ('md')]: {
largura: largura da gaveta,
posição: 'relativa',
altura: '100%',
},
},
contente: {
backgroundColor: theme.palette.background.default,
largura: '100%',
padding: theme.spacing.unit * 3,
altura: 'calc (100% - 56px)',
marginTop: 56,
[theme.breakpoints.up ('sm')]: {
altura: 'calc (100% - 64px)',
marginTop: 64,
},
},
});

export class ResponsiveDrawer extends React.Component {
estado = {
mobileOpen: false,
};

handleDrawerToggle = () => {
this.setState ({mobileOpen:! this.state.mobileOpen});
};

render () {
const {classes, tema} = 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 = {
classes: PropTypes.object.isRequired,
tema: PropTypes.object.isRequired,
};

exportação padrão com estilos (estilos) (ResponsiveDrawer);
`

O CSS injetado aumentará com o número de instâncias do componente.

@oliviertassinari CSS injetado crescerá + - da mesma forma que o html crescerá com estilos embutidos. Os estilos estáticos são renderizados em folhas separadas e reutilizados em todas as instâncias do componente.

Eu fiz assim, embora com o componente stateless ele irá renderizar novamente o withStyle de render para render , podemos evitar usando o componente puro completo.

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;

Podemos usar o componente puro completo para evitar a atualização

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 Funciona, mas é muito doloroso, vou tentar modificar withStyles , para usar mais diretamente https://github.com/cssinjs/react-jss que pode passar props em valores

@SrikanthChebrolu você poderia mover sua mensagem para um problema diferente, já que não está no tópico?

Apenas curioso para saber qual é o status disso? Estive lendo esta edição, os documentos JSS, material-ui docs, e ainda estou procurando uma solução para Mui + Jss + TypeScript que não exija o uso de estilos embutidos. Colocar alguns estilos embutidos às vezes é inevitável, mas no meu caso existem vários estilos com muitos estados diferentes, todos contando com o tema e acessórios juntos: decepcionado:

@chazsolo Ei Chaz, você realmente pode usar injectSheet de react-jss vez de withStyles de mui . Dessa forma, você pode ter props e 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 Acho que você deseja acompanhar este problema https://github.com/cssinjs/jss/issues/682

Obrigado @kof e @ up209d - inscrito e dando uma chance ao exemplo do up209d.

@ up209d
Infelizmente, não acho que isso vai funcionar para mim - implementei o que você sugeriu e posso ver os adereços na chamada de função dentro do objeto styles , mas continuo a receber erros. Estou apenas faltando tipos? Estou estendendo WithStyles em interfaces de adereços para ter acesso ao objeto classes em adereços (agora estou me perguntando se esse é o problema referenciado em 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'.

Meu tema se parece com:

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: {
    // ...
  },
})

O interessante é que, quando eu uso o objeto classes em meu componente, arc e arcMovement são propriedades válidas:

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

Atualizar

Consegui fazer isso funcionar, mas conforme observado no comentário acima, tive que retirar todas as referências a WithStyles , withStyles e perdi classes composição e tema aninhamento. Vou dar um descanso agora e ficar de olho nos fios. Obrigado por toda a ajuda!

@chazsolo Ei Chaz, não tenho certeza, mas é que você deseja acessar classes dentro do props do objeto style . Em caso afirmativo, acho que é impossível, uma vez que classes apenas disponível após jss processado o objeto style , como você pode acessar classes antes de um processo de fabricação classes ainda não foi acionado?

Acho que o @caub já forneceu uma solução. Basta reenviar a solução com um pequeno toque. Não há necessidade de qualquer biblioteca extra.

Crie seu próprio invólucro 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);

Se você não gosta de criar withStylesProps para cada componente, tente adicioná-lo em um arquivo separado e importe onde quiser.

@iamthuypham Obrigado pela dica. No entanto, quando envolvo meu componente com withStylesProps , a animação do componente de transição <Collapse que estou usando em algum lugar dentro do componente embrulhado para de funcionar.

@ jdolinski1 Você pode copiar / colar seu exemplo de código?

@iamthuypham sua solução tem a desvantagem de criar uma nova tag <style> cada vez que um componente é criado. Além disso, você deve ter cuidado ao usar defaultProps e adicioná-los ao seu componente HOC e não aos componentes básicos.

Tudo isso é suportado por react-jss , não pode ser suportado nativamente por material-ui ?

Além disso, acho que o problema de @ jdolinski1 é que seu código não propaga children o componente empacotado pode ter.

@iamthuypham Eu acho que não é recomendado fazer isso, como eu costumava fazer assim no passado, e você pode ter um desempenho ruim, desde que o aplicativo cresça muito em breve. Criar uma nova instância de component com o novo objeto jss style não é bom em termos de princípio de codificação porque o objeto style tem que ser totalmente refeito, de novo e de novo, a cada tempo por mudança de props . Usar injectSheet de react-jss é a melhor escolha. Se você olhar para o injectSheet , verá que ele divide seu objeto style em 2 partes ( static & dynamic ), portanto apenas dynamic é renderizado novamente quando props muda.

como usar plug-ins como jss-nested com injectSheet ?.

com injectSheet não consigo fazer com que as instruções '&: hover' funcionem.
com withStyles não consigo acessar os adereços ...

@koutsenko Aqui está um exemplo:

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

Espero que ajude.

Uau, é incrível o progresso que fizemos em cerca de 1 ano 😍.

agora, como você datilografa isso?

@stunaz Boa pergunta. Eu não sei. Eu não olhei para isso. @ eps1lon fez a definição TypeScript do módulo. Você pode usá-lo como ponto de partida.
https://github.com/mui-org/material-ui/blob/f4281a77d15b0d6eec9d33cdc358cfb89844996d/packages/material-ui-styles/src/index.d.ts#L72

@koutsenko Aqui está um exemplo:

Obrigado @oliviertassinari , com " @ next " agora funciona.

@koutsenko Se você não conseguiu fazer jss-nested funcionar, deve haver um problema de configuração em algum lugar de sua codificação. Como jss-nested está incluído em jss-default-preset , então funciona oob

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

@oliviertassinari

Você também pode definir todo o objeto de estilos para um determinado seletor com adereços? Onde você pode aplicar condicionalmente uma propriedade?

Por exemplo, assim

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

Para que, se o prop não existir, ele usará o valor de preenchimento anterior, ao invés de outra coisa que eu tenha que definir? Por exemplo, existem outras regras que normalmente se aplicam ao preenchimento, mas eu só quero definir essa nova propriedade de preenchimento se o color prop estiver definido.

Obrigado!

@Guardiannw Por algum motivo, sua variante não funciona. Talvez @kof possa esclarecer o porquê 💡. Você pode fazer o seguinte:

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

// or 

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

@oliviertassinari Estou tendo dificuldade em obter sua segunda opção para trabalhar com a função withStyles . Funciona apenas com makeStyles e ganchos?

@Guardiannw Está funcionando com qualquer uma das APIs de @material-ui/styles .

@oliviertassinari parece uma sintaxe válida, os valores fn foram adicionados na v10, então ou a v9 foi usada ou eu preciso de uma reprodução do codesandbox

Ok, foi com isso que tentei. Talvez tenha que tentar novamente.

@oliviertassinari Tenho uma pergunta sobre o uso de @ materia-ui / styles, está disponível e para uso em um ambiente de produção ?, na documentação indica que não funciona com a versão estável, estou usando o " 3.9.1 ", o exemplo https://github.com/mui-org/material-ui/issues/8726#issuecomment -452047345 que você apresenta tem um recurso poderoso e útil de que preciso. Nessas edições, vi muitos comentários de uma perspectiva diferente e também gosto da solução https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636 de @caub , mas seu comentário sobre o dele solução é boa.

@ contrerasjf0 @material-ui/styles só está disponível como uma versão alfa. Tratamos as versões alfa como a maioria dos pacotes no ecossistema de reação. Eu recomendaria que você nunca use nenhum pacote alfa em produção. Se você fizer isso, você deve esperar bugs e mudanças significativas entre qualquer lançamento, ou seja, você deve ser capaz de lidar com o acréscimo de versões alfa rotativas.

O que espero é que as pessoas usem essas versões em projetos de hobby ou em um branch separado que não seja implantado para produção, mas ainda testado como o branch de produção. Agradeço a todos que usam essas versões alfa e nos dão feedback sobre elas.

@ up209d sim, sua solução funciona, mas com
styles = { name: { cssprop: props => {} } notação, não
styles = props => ({ name: { cssprop: {} })

Além disso, JssProvider não é necessário.

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

Você não pode acessar props no nível superior, mesmo como um segundo argumento após theme

Eu encontrei um caminho

// 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 Evite esse padrão. Estamos fornecendo uma API nativa na v4.

@oliviertassinari obrigado pela atualização. Esse padrão já está disponível? Qualquer documentação disponível?

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

Uma última pergunta @oliviertassinari . Posso usar makeStyles em combinação com withStyles ?

Não consigo encontrar documentação para isso. O que estou tentando fazer é o seguinte:

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

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

@ andreasonny83

• makeStyles é para ganchos reativos
• withStyles HOC aceita a mesma sintaxe

Use um ou outro, em seu exemplo apenas remova makeStyles :

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

Gday gente pensou que id compartilhar minha solução atual com referência à discussão acima, espero que ajude alguém ou alguém poderia oferecer melhores conselhos sobre minha solução atual. Para minha página de login, id como uma imagem de fundo aleatória, mas ainda gosto de manter o poder do material ui api. O AuthPage é apenas a camada de apresentação pai que leva os componentes de autenticação individuais (login, bloqueado, senha esquecida, redefinição de senha, etc.) como filhos. Pode confirmar a cada atualização de página um novo carregamento de plano de fundo, bem como um bom adereços fortemente tipados dentro do 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;

simplesmente faça algo assim:

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

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

que tal passar também o estado?

@ luky1984
Você não pode. Em vez disso, você pode fazer:

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

Ou use clsx https://www.npmjs.com/package/clsx em vez disso

@caub Sua solução estraga a ordem de nome de classe gerada por jss.
Como escrito aqui: https://github.com/mui-org/material-ui/issues/8726#issuecomment -363546636
Tentei usar sua solução, mas sua solução de componente HOC (withStylesProps) atrasa a chamada dele comStyles, porque está empacotado, portanto, chamá-lo com classNames não substitui o css.
Como: https://codesandbox.io/s/hocs-8uhw1?file=/index.js

o fundo deve ser # 0000000 e cor: azul