Is there a way to customize the colors of {note.title} and {note.category}? I have attempted to do so by creating a theme:
const theme = createTheme ({
palette: {
category: {
color: blue
}
}
})
Unfortunately, this approach did not yield the desired results. I also tried using inline styles like sx={{fontSize: 16,color: '#000000'}}, but with no success.
What steps should I take to change the color for these two sections?
<div>
<Card elevation={10} className={classes.test}>
<CardHeader
action={ // 200
<IconButton onClick={() => handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={note.title}
subheader={note.category}
/>
<CardContent>
<FormGroup>
<FormControlLabel sx={{fontSize: 16,color: '#000000'}} control={<Checkbox />} label={note.details} />
<FormControlLabel sx={{fontSize: 16,color: '#555555'}} control={<Checkbox />} label={note.details2} />
</FormGroup>
</CardContent>
</Card>
</div>
)Check out the full code here : https://github.com/Orelso/Project-notes