In MUI how can i add color to something inside of CardHeader?

user_19664236 0
Viewed 27

I would like to change the colors of each title={note.title} subheader={note.category} I have tried

const theme = createTheme ({
    palette: {
        category: {
            color: blue
        }
    }
})

But that hasn't worked I have also tried inline sx={{fontSize: 16,color: '#000000'}} again no luck.

How can I go about editing the color for those 2 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>
    )

Full code here : https://github.com/Orelso/Project-notes

material-ui header colors javascript
1 Answers

You can pass node in the title and subheader -

<CardHeader 
  action={ // 200
    <IconButton onClick={() => handleDelete(note.id)}> 
    <DeleteOutlined />
    </IconButton>
  }
  title={<span style={{fontSize: 16, color: "#000000"}}>{note.title}</span>}
  subheader={<span style={{fontSize: 12, color: "#000000"}}>{note.category}</span>}
/>
user_44975400
Related