Material UI goodness: How to make custom CSS styles looking at the props of the component and using the makeStyles(). Some basic MUI components in here, doc supported.

NoteCard.js

import React from 'react'
import Card from '@material-ui/core/Card'
import CardHeader from '@material-ui/core/CardHeader'
import CardContent from '@material-ui/core/CardContent'
import { IconButton, makeStyles, Typography } from '@material-ui/core'
import { DeleteOutlined } from '@material-ui/icons'
import Avatar from '@material-ui/core/Avatar'
import { blue, green, pink, yellow } from '@material-ui/core/colors'

const useStyles = makeStyles({
    avatar: {
        backgroundColor: (note) => {
            if(note.category == 'work'){ return yellow[700]}
            if(note.category == 'money'){ return green[700]}
            if(note.category == 'todos'){ return pink[700]}
            return blue[500]
        }
    }
})

export default function NoteCard({note, handleDelete}) {
    const classes = useStyles(note)
    return (
        <Card elevation={1} className={classes.test}>
            <CardHeader
                avatar={
                    <Avatar className={classes.avatar}>
                        {note.category[0].toUpperCase()}
                    </Avatar>
                } 
                action = {
                    <IconButton onClick={() => handleDelete(note.id)}>
                        <DeleteOutlined />
                    </IconButton>
                }
                title={note.title}
                subheader= {note.category} 
            />

            <CardContent>
                <Typography variant="body2" color="textSecondary">
                    {note.details}
                </Typography>
            </CardContent>
        </Card>
    )
}