Как добавить фоновое изображение к кнопке из материала-интерфейса в React?

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

Answer 1

Основная проблема, которую я вижу в вашем коде, - это просто опечатка. Вам не хватает буквы «d» в «backgroun d Image».

Вот рабочий пример:

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

Answer 2

Я не уверен, что пользовательский интерфейс материала поддерживает фоновое изображение для кнопки или нет. Но вы можете использовать IconButton из материала, чтобы использовать как кнопку со стрелкой

вот пример:

import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import NavigateNextIcon from '@material-ui/icons/NavigateNext';

export default function NextButton() {
    return (
        <div>
            <IconButton color="primary" aria-label="upload picture" component="span">
                <NavigateNextIcon/>
            </IconButton>
        </div>
    );
}