How to Change the Color of the typography with a certain condition that change the color of the text

user_15492804 0
Viewed 52

I am new to using Material UI with ReactJS, and trying to change the color of typography.

I don't know where to start. like I want to turn the text into the color red if the text is equal to Not Available and green if Available

This is my code:

const colors = () => {
       
            if ('Product_Status' == 'Not Available')
                return ('red');
            else
                return ('green');

    };



<ImageList sx={{ width: 500, height: 450 }} cols={2} gap={15}>
                    {/* Mapping image */}

                    {category.map(

                        // For each process
                        item => (
                            <ImageListItem key={item.Product_ID}>

                                {/* Image property */}
                                <img
                                    src={item.Product_image}
                                    alt={item.Product_name}
                                    loading="lazy"
                                />


                                <ImageListItemBar
                                    title={<Typography variant="h4" color="White">{item.Product_name} </Typography>}
                                    subtitle={<Typography variant="h6" color="White">₱ {item.Product_price}   <br />
                                        {item.Product_category} <br />

                                        <Typography variant="h6" color={colors}>  {item.Product_Status}   </Typography>
                                    </Typography>}
reactjs
1 Answers

I don't see anywhere in the documentation for Typography that there is a color prop like the one you're trying to use (I could be wrong).

But there is a classes prop.

I'd recommmend maybe defining a css class for each of the colours, like:

.red-text{
  color:red;
}
.green-text{
  color:green;
}

Then, when using the component Typography component, you can add a class conditionally:

<Typography variant="h6" classes={item.Product_Status === 'Available' ? 'green', 'red'}>
user_168064580
Related