создание свойства backgroundImage из тем материалов пользовательского интерфейса - PullRequest
Новая
       3

создание свойства backgroundImage из тем материалов пользовательского интерфейса

0 голосов
/ 28 марта 2020

У меня CSS -ориентированная проблема. Мне нужно отобразить список карточек с блеклым фоном, чтобы он был полупрозрачным, а наложенный текст - непрозрачным. Я поделился двумя изображениями ниже:

Первое изображение выполняет именно то, что я хочу сделать (так как размытие фона не размывает оверлейный текст), но проблема в том, что я использовал материальные темы пользовательского интерфейса (я думаю, что это как это называется) и я не могу понять, как заставить свойство backgroundImage хранить значения Dynami c для них. Как я могу сделать backgroundImage dynamici c, чтобы получить все изображения, как во втором pi c? Нечто подобное, которое я пробовал, но не работает: {classes.categoryCard.backgroundImage = url ($ {el.image}) }

Примечание. Проблема со вторым снимком экрана заключается в том, что я использую тег изображения для получения изображений, который упрощает рендеринг изображений, динамически, но я не могу отделить размытие от наложенного текста таким образом.

код от компонента: 

// images
import deals from "../assets/deals.jpg";
import breakfast from "../assets/breakfast.jpg";
import fastfood from "../assets/fastfood.jpg";
import mexican from "../assets/mexican.jpg";
import vegan from "../assets/vegan.jpg";
import american from "../assets/american.jpg";
import healthy from "../assets/healthy.jpg";
import chinese from "../assets/chinese.jpg";
import pizza from "../assets/pizza.jpg";
import coffee from "../assets/coffee.jpg";
const categoryArr = [
    {category: 'Latest Deals', image: deals},
    {category: 'Breakfast and Brunch', image: breakfast},
    {category: 'Fast Food', image: fastfood},
    {category: 'Mexican', image: mexican},
    {category: 'Vegan', image: vegan},
    {category: 'American', image: american},
    {category: 'Healthy', image: healthy},
    {category: 'Pizza', image: pizza},
    {category: 'Chinese', image: chinese},
    {category: 'Coffee and Tea', image: coffee},
]
const DineSearch = props => {
    // const [trucksByType, setTrucksByType] = useState([]);
    const useStyles = makeStyles({
            categoryCard: {
                backgroundImage: `url(${chinese})`,
                backgroundSize: 'cover',
                backgroundRepeat: 'no-repeat',
                height: 200,
            }
          });
    const classes = useStyles();
    const selectCategory = (category) => {
        props.getTrucksByCuisine(category)
            .then(props.history.push(`/diner/${props.dinerId}`))
    }
    return (
        <div>
            <h1>This is the Dine Search component</h1>
            <Grid className="category-grid" container spacing={1}>
                {categoryArr.map(el => (
                    <Grid item xs={6}>
                        <Card className={classes.categoryCard} onClick={() => selectCategory(el.category)}>
                                <div className="category-image-wrapper">
                                <CardMedia
                                    className="category-image"
                                    // image={el.image}
                                />
                                </div>
                                <div className="category-text-wrapper">
                                <Typography className="category-text" component="h2">
                                    {el.category}
                                </Typography>
                                </div>
                        </Card>
                    </Grid>
                ))}
            </Grid>
            <DinerFooter />
        </div>
    )
}

enter image description here

enter image description here

Ответы [ 2 ]

1 голос
/ 28 марта 2020

Вы можете попробовать передать изображение в виде пропеллера backgroundImage: 

<CardMedia
    className="category-image"
    backgroundImage={el.image}
/>

Затем, в файле компонента CardMedia, добавить несколько встроенных CSS на основе того, что передано в проп в style опора любого элемента DOM, который у вас есть (я использую <div>): 

function CardMedia(props) {
  return (
    <div style={{
      backgroundImage: props.backgroundImage,
    }}>
    { /* implement the rest of the card...*/ } 
    </div>
  );
}
0 голосов
/ 28 марта 2020

Я получил это с помощью встроенного стиля. 

<Card 
className={classes.categoryCard} 
style={{ backgroundImage: `url(${el.image})` }} 
onClick={() => selectCategory(el.category)}
>

enter image description here

...