We are using emotion to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their Styled Components approach, which allows you to extend our built-in components.
For basic building blocks (views, texts, ...) you can use the styled object.
Extending Flipper Components
It's very common for components to require customizing Flipper's components in some way. For example changing colors, alignment, or wrapping behavior. Flippers components can be wrapped using the
styled function which allows adding or overwriting existing style rules.
The CSS-in-JS object passed to the styled components takes just any CSS rule, with the difference that it uses camel cased keys for the properties. Pixel-values can be numbers, any other values need to be strings.
The style object can also be returned from a function for dynamic values. Props can be passed to the styled component using React.
Pseudo-classes can be used like this:
The colors module contains all standard colors used by Flipper. All the available colors are defined in
desktop/src/ui/components/colors.tsx with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this: