Material-UI : Pass props to useStyles when using Array.map()

Question

I've done some research on passing props to makeStyles in Material-UI, and this answer has the solution that passes the props as a variable. But it would be nice if I could pass the array values to styles as well. For example, it's not possible to set the url of background image using makeStyles.

const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: props => props.raidus
    backgroundImage: props => `url(${props.urls[0]})` // failure -- This will set every url to first image
  }
}));

export default App = () = {
  const urls = [
      'path/image-1.jpg', 
      'path/image-2.jpg',
      'path/image-3.jpg',
  ];
  const props = {
    radius: 10,
    urls: urls
  };
  
  const classes = useStyles(props);

  return (
    <div>

    {urls.map((url, index) => {
      <div
        key={index}
        className={classes.root}  // <--- I want it handled here
        // styles={{ background: `url(${url})` }}  // <--- alternative way
      />
    )}

    </div>
  );
};

Alternatively, the url for the background image can be set using inline styles (as shown in the commented-out line), but I would like them to be handled inside the styles in Material-UI. Can this be done inside the class root ? Any help would be appreciated.

Fraction · Accepted Answer · 2021-05-20T09:17:26.620

You need another component that retrieves the url and passes it to useStyles()

const urls = ["path/image-1.jpg", "path/image-2.jpg", "path/image-3.jpg"];

const useStyles = makeStyles(theme => ({
  root: {
    borderRadius: props => props.radius,
    backgroundImage: props => `url(${props.url})`
  }
}));

function MyComponent(props) {
  const { url } = props;

  const styleProps = {
    radius: 10,
    url
  };

  const classes = useStyles(styleProps);

  return (
    <div
      className={classes.root}
    >
      {url}
    </div>
  );
}

export default function App() {
  return (
    <div>
      {urls.map((url, index) => (
        <MyComponent key={index} url={url} />
      ))}
    </div>
  );
}

Working example (check the background-image property from the devtools)

Ah, I hadn't thought of that. You've been a great help! Thank you — bubbleChaser, Jan 22 '20 at 11:04

score 1 · Answer 2 · answered Jan 22 '20 at 08:51

1

use $ for setting :

backgroundImage: (props) => `url(${props.url[0]})`

Sample : HERE

answered Jan 22 '20 at 08:51

Babak Yaghoobi

1,892
9
18

Oh, that was a typo. I was just trying to say that it can only link single url by doing that way. I've updated the question with $. Thanks, – bubbleChaser Jan 22 '20 at 08:57

score 0 · Answer 3 · answered Nov 06 '21 at 19:49

Thank you so much BabakYaghoobi !! I've been trying all the ways as possible and yours was the only one that worked :)

   
  import { mobile, mobileM } from "../responsive"; 
 //
//data.js
    export const sliderItems = [
      {id: 0,
        img: "../img-store/oladimeji-odunsi-2.jpg",
        title: "AUTUMN COLLECTION",
        desc: "DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.",
        bg: "F9DA8F",
        fColor: "121212",
        mobileFColor: "ffffff",
        button: "shop now",
        component: "productList",
          },
    ];
//--------

    const Slide = styled.div`
      width: 100vw;
      height:100vh; 
     

     
      display: flex;
      align-items: center;
      background-image: none;
      //color PROPS
      background-color: #${(props) => props.bg};
      color: #${(props) => props.fColor};


      ${mobile({
        backgroundImage: (props) => `url(${props.small})`,
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundColor: "transparent",
        backgroundPosition: "center",
        color: (props) => `#${props.mobileFColor}`
      })}
     
    `;


    const Slider = () => {
     
      return (
        <Container>

          <Wrapper slideIndex={slideIndex}>
            {sliderItems.map((items) => (
              <Slide
                bg={items.bg}
                fColor={items.fColor}
                mobileFColor={items.mobileFColor}
                key={items.id}
                small={items.img}
              >
           
             <InfoContainer>
                  <Title>{items.title}</Title>
                  <Desc>{items.desc}</Desc>
                  <Link to={items.component}>
                    <Button fColor={items.fColor}>    {items.button}
                    </Button>
                  </Link>
                </InfoContainer>
              </Slide>
            ))}

        
          </Wrapper>
        </Container>
      );
    };

    export default Slider;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>

Material-UI : Pass props to useStyles when using Array.map()

3 Answers3