Reputation: 4883
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
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>;
}
Upvotes: 1
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