Styling
The admin-ui StyleObject lets you style elements while consuming values from the theme. We use emotion under the hood - you can think of it as a superset of emotion's css object. So, this means that any valid emotion object is also accepted.
Design tokens
Design tokens can be consumed from specific properties within the StyleObject. They are the recommended values for those props if you desire to reach consistency between apps. These are defined within our default theme, and you can check all the available design tokens on the link.
Nesting
Sometimes it’s useful to nest selectors to target elements inside the current class or React component. An example with an element selector is shown below.
className
Scoped classNames can also be created and reused multiple times.
Pseudo-classes
You can use all CSS Pseudo-classes such as :hover, :active, :focus and more. For example:
Pseudo-elements
You can use all CSS Pseudo-elements such as :before and :after. For example:
Media queries
You can also use the standard CSS media query syntax. All features work inside media query declarations as well (like: nesting, className, pseudo-elements, etc.).
Responsive values
Responsive values accept an array of values. The current value will be the one that matches the breakpoint:
| name | min-width em | min-width px |
|---|---|---|
| mobile | 40rem | 640px |
| tablet | 48rem | 768px |
| desktop | 64rem | 1024px |
| widescreen | 80rem | 1280px |
This is useful when you want to change a single property across multiple breakpoints without needing to write verbose media query syntax. In the example below, the <div> has full width while on mobile, and half on desktop and above.
If you want to skip a breakpoint, you can use the value null. This is useful if you want to set a value for only the largest breakpoint.
<Box
csx={{
width: [null, null, '25%'],
}}
/>
Functions
For shorthand CSS properties or ones that are not automatically mapped to values in the theme, use an inline function to reference values from the theme object.