Styling Components

Flipper ships with its own design system which is based on Ant Design. In general, custom styling should be needed rarily, as Ant Design provides a very extensive set of components.

To build plugin layout and data visualization Flipper ships with an additional set of components through the flipper-plugin package. The list of available additional compoents can be found in the API Reference and are further documented in the Flipper Style Guide which can be found in Flipper under View > Flipper style guide.

In case you still need customly styled components, 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 and Ant's built-in components.

Basic tags

For basic building blocks (views, texts, ...) you can use the styled object.

import {styled} from 'flipper-plugin';
const MyView = styled.div({
fontSize: 10,
color: colors.red
});
const MyText = styled.span({ ... });
const MyImage = styled.img({ ... });
const MyInput = styled.input({ ... });

Extending Flipper Components

In some cases it is required to customize Ant or 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.

import {Layout, styled} from 'flipper-plugin';
const Container = styled(Layout.Container)({
alignItems: 'center',
});
function MyComponent {
return <Container>...</Container>;
}

CSS

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.

const MyView = styled.div(
props => ({
fontSize: 10,
color: => (props.disabled ? 'red' : 'black'),
})
);
// usage
<MyView disabled />

Pseudo-classes can be used like this:

'&:hover': {color: 'red'}`

Children can be matched by using normal CSS selectors. This makes it possible to customize Ant components as well:

'.ant-btn-primary': {color: 'yellow'}

Colors

The theme module contains all standard colors used by Flipper. All available colors can be previewed by starting Flipper and opening View > Flipper Style Guide. The colors exposed here will handle dark mode automatically, so it is recommended to use those colors over hardcoded ones.

import {theme} from 'flipper-plugin'