score:0

as i understand, you want to:

  • reuse some common properties like width and fontsize.
  • custom render other properties like color.

then this is my approach:

  • first, make new style for commonly used properties.
  • secondly, create new styles for conditional use of each state.
  • last, use something like classnames to combine all classes.

so the main idea here is: instead of using one class for each item, now using two classes for each one. that's it!

const usestyles = withstyles({
  commonproperty: {
    fontsize: '20px',
    width: '20px',
  },
  successonlyproperty: {
    color: 'green'
  },
  warningonlyproperty: {
    color: 'orange'
  },
});

Related Query

More Query from same tag