reactjs - 如何在反应中从material-ui向Button添加背景图像？

Question

我想将背景图像添加到Material-ui按钮中React，但我不知道如何正确执行此操作。这是我的代码。任何想法如何使它工作？我试图添加backgroundImage样式，但没有奏效。

      const useStyles = makeStyles(() => ({
            buttonStep: {
                width: '150px',
                height: '49px',
                background: '#5F8FE8',
                backgrounImage: 'url("../../assets/icons/arrowButton.svg")',
              },
        }))
        export default function StepNavigation(props) {
        const classes = useStyles()

        return (

                   <Button
                        className={classes.buttonStep}
                    >
                        Next
                    </Button> 
         )}

标签： reactjsmaterial-ui

Answer 1

我在您的代码中看到的主要问题只是一个错字。您在“背景d图像”中缺少“d”。

这是一个工作示例：

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

const useStyles = makeStyles({
  buttonStep: {
    width: "150px",
    height: "49px",
    backgroundImage: "linear-gradient(.25turn, #f00, #00f)"
  }
});

export default function App() {
  const classes = useStyles();
  return <Button className={classes.buttonStep}>Next</Button>;
}