Получение реквизита в пользовательском интерфейсе материалов и условное отображение

Question

Это блок кода с компонентом в стиле, он получает img prop и, основываясь на prop, решает загрузить конкретное c изображение.

export const DialogBanner = styled.div`
  min-height: 250px;
  margin-bottom: 20px;
  ${({ img }) =>
     img
        ? `background-image: url(${img});`
        : `background-image: url("/img/banner.jpg");`}
  background-position: center;
  background-size: cover;
  filter: contrast(85%);
`;

<DialogBanner img={food.img} /> 

Как мне написать то же самое используя пользовательский интерфейс материалов useStyles?

Answer 1

Используя последнюю версию Material-UI, вы будете использовать makeStyles, которая создает хук для использования в вашем компоненте. https://material-ui.com/styles/basics/#adapting на основе реквизита

Например.

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

    // Create our styles using passed props
    // These are `functors` it seems
    const useStyles = makeStyles({
      root: {
        backgroundImage: ({ img }) =>
          img
            ? `url(${img});`
            : `url("/img/banner.jpg");`}
      },
    });

    function DialogBanner(props) {
      // Separating out our children
      const { children, ...rest } = props
      // Prop containing our `img`
      const classes = useStyles(rest);
      retun <div className={classes.root>{children}</div>
    }