I've come across many discussions on this topic, but nothing has worked the way I need it to. In my React component, I'm passing className as a prop. I also have a Higher Order Component (HOC) that takes a component and default style, then returns a component where you can input a new style, like this:
function withCombinedStyles(WrappedComponent, defaultClassName) {
return ({className: newClassName, ...rest}) => {
const className = combineClassNames(newClassName, defaultClassName);
return <WrappedComponent className={className} {...rest} />;
};
};
At the moment, the combineClassNames function simply combines the strings. My goal is for the newClassName to always take precedence over any conflicting styles in the defaultClassName, while still retaining the old ones. Currently, one style seems to dominate the other without any clear order - the arrangement of defaultClassName and newClassName doesn't seem to matter. How can I achieve this? Although I am currently using CSS modules, the project is small enough for me to consider switching to another technology if needed to achieve the desired outcome (though I would prefer to stick with CSS modules and find a React-specific solution).
I could use !important, but that would limit adding a third className and potentially complicate future style extensions.