[英]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.我想将背景图像添加到
React
中的Material-ui
按钮,但我不知道如何正确执行此操作。 Here is my code.这是我的代码。 Any ideas how to make it work?
任何想法如何使它工作? I was trying to add
backgroundImage
to styles, but that didn't work.我试图将
backgroundImage
添加到 styles,但这没有用。
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>
)}
The main problem I see in your code is just a typo.我在您的代码中看到的主要问题只是一个错字。 You are missing the "d" in "backgroun d Image".
您在“背景d图像”中缺少“d”。
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>;
}
I am not sure material ui supports background image for button or not.我不确定材料 ui 是否支持按钮的背景图像。 But you can use
IconButton
from material to use like arrow button但是您可以使用材料中的
IconButton
来使用箭头按钮
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.