Style
: Object< Style | string >
A style is an object that, in the simple case, maps CSS property
names to strings holding their values, as in {color: "red", fontWeight: "bold"}
. The property names can be given in
camel-case—the library will insert a dash before capital letters
when converting them to CSS.
If you include an underscore in a property name, it and everything
after it will be removed from the output, which can be useful when
providing a property multiple times, for browser compatibility
reasons.
A property called specificity
has a special meaning: if it holds
a number N, greater than 0, the selector for the class will have
N extra dummy classes added, and those dummy classes will also be
present in the class name string created for the style. This allows
you to create rules that take precedence over other rules, even
when they are defined earlier.
A property in a style object can also be a sub-selector, which
extends the current context to add a pseudo-selector or a child
selector. Such a property should contain a &
character, which
will be replaced by the current selector. For example {"&:before": {content: '"hi"'}}
. Sub-selectors and regular properties can
freely be mixed in a given object. Any property containing a &
is
assumed to be a sub-selector.
Finally, a property can specify an @-block to be wrapped around the
styles defined inside the object that's the property's value. For
example to create a media query you can do {"@media screen and (min-width: 400px)": {...}}
.