Material-UI ：使用 Array.map() 时将道具传递给 useStyles

Question

我在 Material-UI 中对将道具传递给 makeStyles 做了一些研究，并且有将道具作为变量传递的解决方案。但如果我也可以将数组值传递给样式，那就太好了。例如，无法使用 makeStyles 设置背景图像的 url。

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

或者，背景图像的 url 可以使用 内联样式 设置（如注释掉的行所示），但我希望它们在 Material-UI 中的样式中进行处理。这可以在 class root 内完成吗？任何帮助将不胜感激。

Answer 1

使用 $ 进行设置：

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

样本：HERE

Answer 2

您需要另一个组件来检索 url 并将其传递给 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>
  );
}

工作示例（检查来自开发工具的 background-image 属性）

Answer 3

非常感谢 Babak Yaghoobi ！！我一直在尝试所有可能的方法，而你的方法是唯一有效的:)

   
  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 ：使用 Array.map() 时将道具传递给 useStyles

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

javascript

background-image

reactjs

material-ui