Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reuse the same style rule with multiple selectors

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 common and merge them to both a and b rule

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

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

Is there any better way possible ?

like image 304
Slim Shady Avatar asked Aug 07 '17 22:08

Slim Shady


People also ask

How can we apply same styles to multiple selectors?

When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the color of something to red, for example), you use a single CSS rule that accomplishes the same thing.

What are multiple selectors?

Description: Selects the combined results of all the specified selectors.


2 Answers

How about extend plugin (enabled by default)?

https://cssinjs.org/jss-plugin-extend

const styles = {
  buttonColor: {
    background: 'red'
  },
  button: {
    extend: 'buttonColor',
    fontSize: '20px'
  }
}
like image 155
Linden X. Quan Avatar answered Oct 18 '22 22:10

Linden X. Quan


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; 
}
like image 21
Adam Menczykowski Avatar answered Oct 18 '22 23:10

Adam Menczykowski