Is there any method to modify the styling of a Material UI component without the need to create an entirely new component using withStyles()?
For example, if I am currently displaying the following and simply want to adjust the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
In order to achieve this, typically I would need to:
- Create a new styling function that returns
{ color: "maroon" }. - Create a new component specifically for rendering the "Delete" button.
- Apply my custom styles by calling
.withStyles(newStylesFn)(MyComponent)
However, I am seeking an alternative solution. Is there any way to accomplish this without going through those steps?
Update:
One approach I am aware of is to use a CSS className. However, I was hoping for a different option as it does not work in this particular scenario to override the nested element.
I would prefer to be able to directly pass style={{ color: "maroon" }}, but unfortunately, this only changes the color of the icon itself and not the text of the label...