While working with CSS in JS (JSS) and material-ui, I have encountered some challenges. I am able to inject styles effectively based on the context, but I am unsure of the additional benefits or features that it offers beyond style injection
For example, when using style injection, I can easily adjust the button style based on different conditions:
const buttonStyle = {
border: "2px solid black",
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backgroundColor: "red"
};
if (success) {
buttonStyle.backgroundColor = "green";
}
However, with JSS, it seems like I need to pre-define multiple styles for the same button with different color variations:
const style = {
buttonSuccess: {
border: "2px solid black",
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backgroundColor: "green"
},
buttonError: {
border: "2px solid black",
borderRadius: "5px",
padding: "15px",
font-family: "15px",
font-size: "2em",
backgroundColor: "red"
}
};
I am wondering if there is a way to avoid rewriting the entire style when only one parameter needs to be dynamic?
Additionally, it appears that with JSS, we need to assign separate classes for each HTML element that requires styling.
For instance, if I have a table with 200 cells, would I need to add 200 classes to my DOM (compared to defining it only once with a td selector in pure CSS)?
Is there a method to establish an inheritance of styles between parent and children components in JSS? Previously, I have resorted to a cumbersome technique where I merge the injected parent class with the child's compiled style:
const styles = theme => ({
root: {
backgroundColor: "blue"
}
});
const childComponent = (props) => (
<div className={`${props.parentClass} ${props.classes}`} /> // Parent class mentioned here
);
export default withStyles(styles)(childComponent);