Styling Components

Flipper ships with its own design system that is based on Ant Design. In general, custom styling should be needed rarey, 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 components can be found in the API Reference and are further documented in the Style Guide.

In case you still need custom-styled components, you can use emotion to style your components. For more details on how this works, please refer to emotion's documentation. Emotion's Styled Components approach enables you to extend our and Ant's built-in components.

Basic tags

For basic building blocks (views, texts, and so on), you can use the styled object, as shown below:

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's 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 any CSS rule but uses came-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, as follows:

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

// usage
<MyView disabled />

Pseudo-classes can be as follows:

'&: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 in the style guide. The colors exposed here handles dark mode automatically, so it's recommended to use those colors over hardcoded ones.

import {theme} from 'flipper-plugin'