Я новичок в React и сейчас работаю над проектом, чтобы узнать больше об этом. У меня есть некоторые проблемы с ButtonBase, хотя. Когда я пытаюсь показать изображение, оно показывает мне серый фон на кнопке. Компилируется без ошибок. Я предполагаю, что с импортированным изображением что-то не так. Я пробовал разные методы для его импорта, но ни один из них не работал.
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import DeleteIcon from '@material-ui/icons/Delete';
import EditIcon from '@material-ui/icons/Edit';
import IconButton from '@material-ui/core/IconButton';
import AddIcon from '@material-ui/icons/Add';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import ButtonBase from '@material-ui/core/ButtonBase';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
const images = [
{
url: '../images/image1.jpeg',
title: 'Breakfast',
width: '40%',
},
];
const useStyles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
minWidth: 300,
width: '100%',
},
image: {
position: 'relative',
height: 200,
[theme.breakpoints.down('xs')]: {
width: '100% !important', // Overrides inline-style
height: 100,
},
'&:hover, &$focusVisible': {
zIndex: 1,
'& $imageBackdrop': {
opacity: 0.15,
},
'& $imageMarked': {
opacity: 0,
},
'& $imageTitle': {
border: '4px solid currentColor',
},
},
},
focusVisible: {},
imageButton: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: theme.palette.common.white,
},
imageSrc: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundSize: 'cover',
backgroundPosition: 'center 40%',
},
imageBackdrop: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
backgroundColor: theme.palette.common.black,
opacity: 0.4,
transition: theme.transitions.create('opacity'),
},
imageTitle: {
position: 'relative',
padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
},
imageMarked: {
height: 3,
width: 18,
backgroundColor: theme.palette.common.white,
position: 'absolute',
bottom: -2,
left: 'calc(50% - 9px)',
transition: theme.transitions.create('opacity'),
},
});
/* This view is the one that is seen when one wants to edit a question */
class EditQuestion extends React.Component {
constructor(props)
{
super(props);
}
render(){
const {classes} = this.props;
return (
<div className="App">
<h1>Redigera fråga</h1>
{images.map((image) => (
<ButtonBase
focusRipple
key={image.title}
className={classes.image}
focusVisibleClassName={classes.focusVisible}
style={{
width: image.width,
}}
>
<span
className={classes.imageSrc}
style={{
backgroundImage: `url(${image.url})`,
}}
/>
<span className={classes.imageBackdrop} />
<span className={classes.imageButton}>
<Typography
component="span"
variant="subtitle1"
color="inherit"
className={classes.imageTitle}
>
{image.title}
<span className={classes.imageMarked} />
</Typography>
</span>
</ButtonBase>
))}
</div>
);
}
}
export default withStyles(useStyles)(EditQuestion);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>