Skip to main content

styled

import { styled } from "tonami";

styled works similarly to emotion or styled-components. However, tonami uses objects instead of template literals (more like JSS).

Simple Example#

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

Composition#

Compose styled components by passing a component to the styled function

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

as – Polymorphism#

Change the rendered DOM element via the as prop

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

Dynamic Properties#

You can describe CSS Properties as a function of the props passed to the component.

caution

Always use props that begin with $. Learn More

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

When rendered, tonami uses CSS Custom Properties to apply the color ✨. The benefit is that tonami only has to generate your styles once, and all instances of your component can use the same classes.

Props in Typescript#

If you're using Typescript, pass the component's interface as a generic for type safety and auto-complete.

type Props = {  $color: string;};
const Box = styled.div<Props>({  color: ({ $color }) => $color,  textShadow: ({ $color }) => `2px 2px 2px ${$color}`,});

condition – Conditional Rulesets#

By default the styles you pass are applied to every instance of your component. To apply these styles conditionally add the condition property, and pass it a function of your component's props which returns true or false.

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

Multiple Rulesets#

The style object you pass to styled represents a ruleset. You can pass as many of these as you want to a component and use conditions to toggle them on or off.

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

Similar to the benefits of using CSS custom properties for dynamic values, passing conditional rulesets gives us the ability to write styles once and toggle classes at runtime, rather than writing and rewriting styles imperatively to the document.

apply – Semantic HTML#

By default, a classname is generated for each ruleset; however, sometimes a better description of component state is possible using attribute.

You can use the apply key on a ruleset to describe how a ruleset should be applied.

Keeping in mind that it will still be applied by default unless the condition key is passed.

Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.

If you look at the generated css for the example above you will see something like:

.TAf0585561.TA421a7a22 {  height: 30px;  width: 30px;  transition: all 0.5s ease 0s;}.TAf0585561[disabled] {  height: 60px;  width: 60px;}

selectors – Psuedo-selectors, Media Queries, and child elements#

Each ruleset can be passed a selectors key which takes an object of selectors and the styles to be applied. Each selector must include & and {}, which will be replaced by the root selector and style object respectively.

This is definitely a bit different than how other libraries handle it. We did it this way so we could accomodate psuedo-selectors (:hover) and @rules using the same interface. If you have suggestions for how to improve this, let us know on github or via the discord!
Live Editor
Result
SyntaxError: No-Inline evaluations must call `render`.