I want this using jss styling.

.a{
height: 20px;
}
.b{
height: 40px;
}
.a,.b{
width: 100px;
}

Try 1

Make a rule c and add the class to both a and b

c: {
width: '100px'
}

Try 2

Make a object mon and merge them to both a and b rule

const mon = {
   width: '100px',
};

a: {
height: '20px',
..mon
}
b: {
height: '40px',
..mon
}

Is there any better way possible ?

I want this using jss styling.

.a{
height: 20px;
}
.b{
height: 40px;
}
.a,.b{
width: 100px;
}

Try 1

Make a rule c and add the class to both a and b

c: {
width: '100px'
}

Try 2

Make a object mon and merge them to both a and b rule

const mon = {
   width: '100px',
};

a: {
height: '20px',
...mon
}
b: {
height: '40px',
...mon
}

Is there any better way possible ?

• javascript
• css
• reactjs
• styles
• jss

2 Answers 2

How about extend plugin (enabled by default)?

https://cssinjs/jss-plugin-extend

const styles = {
  buttonColor: {
    background: 'red'
  },
  button: {
    extend: 'buttonColor',
    fontSize: '20px'
  }
}

A simpler alternative that I feel is easier to parse would be to set the key to be a String by wrapping in quotes:

'.a, .b': {
   width: 100px; 
}