CODEWITHSUNDEEP
reactjsmaterial-ui
Moon
Moon

Reputation: 890

How can I use the varible inside array map to control style on Material UI?

I'm using Materil UI 4.11. We know with Material UI, if we want to use a varible inside the style setting, we can do in this way:

const useStyles = makeStyles((theme) => ({
    testStyle: {
        width: ({ ElementWidth }) => `${ElementWidth * 100}%`,
    }
})

and inside component, we set the varible and call the class:

const styleProps = {
    ElementWidth,
}
const classes = useStyles(styleProps)
<Box className={classes.testStyle}>
    element
</Box>

My question is if I want to use a varible inside one array map, how can I set it? The array is like:

const itemArr = [
    {name:"a",successStatus:true,},
    {name:"b",successStatus:false},
    {name:"c",successStatus:true},
]

component:

<Box>
    {itemArr.map((item, index) => {
        return (
            <Box key={index}>
                <Typography className={classes.successStatusStyle}>
                    {item.name}
                </Typography>
            </Box>
        )
    })}
</Box>

What I want to set in the class is the color will be different based on the item.successStatus value:

const useStyles = makeStyles((theme) => ({
    successStatusStyle:{
        color: ({ successStatus }) => successStatus ? theme.palette.success.main : theme.palette.error.main
    }
})

How can I pass the item.successStatus to useStyles, so each item will have dynamic color based on successStatus?

I know with inline-style, I can change the color, like style={{ color: successStatus ? "green" : "blue" }}, but the reason I want to set it inside useStyles is I want to use the pattern from my theme or the default pattern from Material UI. So I cannot use inline-style here.

Upvotes: 1

Views: 1237

Answers (2)

Nabeel Sajid
Nabeel Sajid

Reputation: 190

an alternative solution

const useStyles = makeStyles((theme) => ({
    successStyle:{
        color: theme.palette.success.main
    },
    errorStyle:{
        color: theme.palette.error.main
    },
});


   <Box>
        {itemArr.map((item, index) => {
            const colorClass = item.successStatus ? classes.successStyle: classes.errorStyle;
            return (
                <Box key={index}>
                    <Typography className={colorClass}>
                        {item.name}
                    </Typography>
                </Box>
            )
        })}
    </Box>

Upvotes: 0

Johann-Michael Thiebaut
Johann-Michael Thiebaut

Reputation: 472

Why not pick a class name based on the value of successStatus?

const useStyles = makeStyles((theme) => ({
    successStyle:{
        color: theme.palette.success.main
    },
    errorStyle:{
        color: theme.palette.error.main
    },
});

<Box>
    {itemArr.map((item, index) => {
        return (
            <Box key={index}>
                <Typography className={ item.successStatus ? classes.successStyle: classes.errorStyle }>
                    {item.name}
                </Typography>
            </Box>
        )
    })}
</Box>

Upvotes: 2

Related Questions