Comment utiliser 'theme' et 'props' dans makeStyles ?

Question

Comment écrire makeStyles() pour que cela me permette d'utiliser à la fois des variables de thème et des accessoires ?

J'ai essayé ceci :

const useStyles = makeStyles(theme => ({
  appbar: props => ({
    boxShadow: "none",
    background: "transparent",
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    color: theme.palette.getContrastText(props)
  }),
}));

Et l'a appelé dans le composant avec :

const classes = useStyles(backgroundColor);

Où backgroundColor est un accessoire sur le composant de type CSSProperties["backgroundColor"]

Mais je comprends l'erreur :

TypeError: Cannot read property 'rules' of undefined
    at RuleList.onUpdate (C:\Users\...\node_modules\jss\dist\jss.cjs.js:944:14)
    at RuleList.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:923:12)
    at StyleSheet.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:1178:39)
    at attach (C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:141:18)
    at C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:262:7
    at useSynchronousEffect (C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:207:14)
    at C:\Users\...\node_modules\@material-ui\styles\makeStyles\makeStyles.js:254:5
    at Layout (C:\Users\...\.next\server\static\development\pages\index.js:1698:17)
    at processChild (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2888:14)
    at resolve (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
    at ReactDOMServerRenderer.read (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
    at renderToString (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
    at render (C:\Users\...\node_modules\next-server\dist\server\render.js:86:16)
    at renderPage (C:\Users\...\node_modules\next-server\dist\server\render.js:211:20)
    at ctx.renderPage (C:\Users\...\.next\server\static\development\pages\_document.js:2404:22)

  100 |   handleSignUpClick,
  101 |   backgroundColor
  102 | }) => {
> 103 |   const classes = useStyles(backgroundColor);
  104 |   return (
  105 |     <AppBar className={classes.appbar}>
  106 |       <Container maxWidth="lg">

edit : J'utilise la version 4.0.0-beta.1 de material core et styles

Answer 1

Testé avec :

"@material-ui/core": "^4.0.0-beta.1",
"@material-ui/styles": "^4.0.0-rc.0",

Exemple JavaScript :

my-component.js

import React from 'react';
import { makeStyles } from '@material-ui/styles';

import { useStyles } from './my-component.styles.js'; 

const myComponent = (props) => {
    const styleProps = { width: '100px', height: '100px' };
    const classes = useStyles(styleProps);

    return (
        <div className={classes.mySelector}></div> // with 100px and height 100px will be applied
    )
}

mon-composant.styles.js

export const useStyles = makeStyles(theme => ({
    mySelector: props => ({
        display: 'block',
        width: props.width,
        height: props.height,
    }),
}));

---

Exemple TypeScript :

my-component.ts

import React, { FC } from 'react'; 
import { makeStyles } from '@material-ui/styles';

import { useStyles } from './my-component.styles.ts'; 
import { MyComponentProps, StylesProps } from './my-component.interfaces.ts'; 

const myComponent: FC<MyComponentProps> = (props) => {
    const styleProps: StylesProps = { width: '100px', height: '100px' };
    const classes = useStyles(styleProps);

    return (
        <div className={classes.mySelector}></div> // with 100px and height 100px will be applied
    )
}

mon-composant.interfaces.ts

export interface StyleProps {
    width: string;
    height: string;
}

export interface MyComponentProps {
}

mon-composant.styles.ts

import { Theme } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

import { StyleProps } from './my-components.interfaces.ts';

export const useStyles = makeStyles<Theme, StyleProps>((theme: Theme) => ({
    mySelector: props => ({ // props = { width: string; height: string }
        display: 'block',
        width: props.width,
        height: props.height,
    }),
}));

Mise à jour

Testé

à nouveau avec

"@material-ui/core": "^4.8.3"

Answer 2

Vous devez passer un objet à useStyles une chaîne.

Donc au lieu de :

const classes = useStyles(backgroundColor);

vous devriez avoir :

const classes = useStyles(props);

ou

const classes = useStyles({backgroundColor});

Ensuite, vous pouvez obtenir à backgroundColor en utilisant :

color: theme.palette.getContrastText(props.backgroundColor).

Voici un exemple de travail : https://codesandbox.io/s/o7xryjnmly

Answer 3

Vous pouvez faire ceci : (je ne sais pas si c'est la meilleure façon, mais fonctionne... peut également accéder au fournisseur de thème ang globals (en utilisant themeProvider))

import { makeStyles }from '@material-ui/core/styles'
import styles from './styles';

const useStyles =  makeStyles(theme => (styles(theme))); // here call styles function imported from styles.js
const SideNav = ({drawerState, toggleDrawer}) => {

  const classes = useStyles();

return (
 <Box className={classes.root}>

    <Drawer className="drawer" anchor="left" open={drawerState} onClose={() => toggleDrawer(false)}>
      <NavList></NavList>
    </Drawer>

  </Box>
);


export default SideNav;

et dans styles.js

const styles = (theme) => {
return ({
    root: {
        '& .drawer': {
            backgroundColor:'red'
        }
    }
});

}

export default styles;

makeStyles obtenir le thème par params de sorte que vous pouvez créer un styles.js pour chaque composant avec une fonction de flèche à l'intérieur et appel de makeStyles qui peut accéder au fournisseur de thème.

Answer 4

Voici un exemple de la façon dont vous pouvez utiliser uniquement des accessoires ou des accessoires et des thèmes à la fois avecmakeStyles () tout comme styled-components

component.js

import { tableCellStyling } from './component.styled.js';

const RenderRow = (props) => {
    const { noPaddingTopBottom } = tableCellStyling(props);
    return(
        <StyledTableRow>
            {data.map( (row,i) => (
                <StyledTableCell className={noPaddingTopBottom}>
                    {row.data}
                </StyledTableCell>
            )}
        </StyledTableRow>
    )
};

En supposant que mon objet props qui est passé par RenderRow Component à tableCellStyling a { color : 'grey', thinRow : true } dedans

component.styled.js

import { makeStyles } from '@material-ui/core/styles';

export const tableCellStyling = makeStyles(theme => ({
    noPaddingTopBottom: {
        borderBottom: ({ color }) => color ? `2px solid ${color}` : '2px solid red',
        paddingBottom: props => props.hasActions && 0,
        paddingTop: props => props.hasActions && 0,
        backgroundColor: theme.palette.common.white,
    },
}));