CODEWITHSUNDEEP
reactjsmaterial-ui
Lucky_girl
Lucky_girl

Reputation: 4883

How to add background image to Button from material-ui in react?

I want to add background image to Material-ui button in React and I don't know how to do this correctly. Here is my code. Any ideas how to make it work? I was trying to add backgroundImage to styles, but that didn't work. 

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

Upvotes: 2

Views: 5751

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81166

The main problem I see in your code is just a typo. You are missing the "d" in "backgroundImage".

Here is a working example:

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

Edit Background image Button

Upvotes: 1

Khabir
Khabir

Reputation: 5842

I am not sure material ui supports background image for button or not. But you can use IconButton from material to use like arrow button

here is an example:

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

Upvotes: 0

Related Questions