ReactJS Material de interfaz de usuario withStyles incl. tema en el TS

votos
0

Traté de convertir el tablero de instrumentos UI material en texto mecanografiado. https://github.com/mui-org/material-ui/blob/master/docs/src/pages/page-layout-examples/dashboard/Dashboard.js

Actualmente estoy enfrentando el problema de que las definiciones de estilo CSS no se pueden ajustar en función de withStyles al exportar el tablero de instrumentos.

const styles = (theme: Theme) => ({
  root: {
    display: 'flex',
  },
  toolbar: {
    paddingRight: 24, // keep right padding when drawer closed
  },
  toolbarIcon: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  .....
});

Si he entendido bien, necesito este tema de referencia para ajustar el estilo al tema actual. Pero ¿cómo consigo el tema actual cuando se llama a la función de estilo?

export default withStyles(styles(/*WHAT TO PUT IN HERE?*/))(Dashboard);
Publicado el 07/11/2018 a las 22:39
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

export default withStyles(styles)(Dashboard);

withStyles determinará si hay que llamarlo con el tema o no.

withThemeo withStyles(stylesObjectOrCreator, { withTheme: true })sólo es necesario si usted necesita para acceder al themeinterior de su componente a través de los apoyos.

API: https://material-ui.com/customization/css-in-js/#withstyles-styles---options----higher-order-component

Respondida el 08/11/2018 a las 06:16
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more