Trying to change the color of the title text
I’ve commented out failed attempts in ImageListItemBar
and ImageListItem
I can’t find where mui wants me to put it
<ImageList
sx={{
width: "70%",
height: 450,
// Promote the list into its own layer in Chrome. This costs memory, but helps keeping high FPS.
transform: 'translateZ(0)',
}}
rowHeight={200}
gap={1}
// variant="quilted"
// variant="standard"
varinant="masonry"
>
{itemData.map((item) => {
const cols = item.featured ? 2 : 1;
const rows = item.featured ? 2 : 1;
return (
<ImageListItem
key={item.img}
cols={cols}
rows={rows}
>
<img
{...srcset(item.img, 250, 200, rows, cols)}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
sx={{
background:
'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
// color: 'primary',
color: "text.secondary"
}}
title={item.name}
subtitle={item.formatted_address}
position="top"
actionIcon={
<IconButton
// sx={{ color: 'primary.main' }}
color={starred ? "primary" : "error"}
aria-label={`star ${item.title}`}
onClick={() => {
setStarred(!starred);
}}
>
{starred ? <StarBorder /> : <StarRate />}
{item.rating}
{starred ? <HeartBroken /> : <Favorite />}
{item.user_ratings_total}
</IconButton>
}
actionPosition="left"
// titleWrap={{
// fontSize: "1.5rem",
// fontWeight: "bold",
// color: "text.primary",
// }}
/>
</ImageListItem>
);
})}
</ImageList>
