1dd2f8bcf1
Summary: Restyle of page, including changes to spelling, grammar, links, and structure (where relevant). Reviewed By: mweststrate Differential Revision: D36595388 fbshipit-source-id: 0d65c3b7099d492c1e3959f9d1d4b3f7c09cd98d
86 lines
2.9 KiB
Plaintext
86 lines
2.9 KiB
Plaintext
---
|
|
id: styling-components
|
|
title: Styling Components
|
|
---
|
|
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
import Link from '@docusaurus/Link';
|
|
|
|
Flipper ships with its own design system that is based on [Ant Design](https://ant.design/).
|
|
In general, custom styling should be needed rarey, as Ant Design provides a very extensive set of [components](https://ant.design/components/overview/).
|
|
|
|
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 <Link to={useBaseUrl('/docs/extending/flipper-plugin#ui-components')}>API Reference</Link> and are further documented in the [Style Guide](style-guide.mdx).
|
|
|
|
In case you still need custom-styled components, you can use [emotion](https://emotion.sh) to style your components. For more details on how this works, please refer to emotion's documentation. Emotion's [Styled Components](https://emotion.sh/docs/styled) 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:
|
|
|
|
```js
|
|
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.
|
|
|
|
```jsx
|
|
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:
|
|
|
|
```jsx
|
|
const MyView = styled.div(
|
|
props => ({
|
|
fontSize: 10,
|
|
color: => (props.disabled ? 'red' : 'black'),
|
|
})
|
|
);
|
|
|
|
// usage
|
|
<MyView disabled />
|
|
```
|
|
|
|
Pseudo-classes can be as follows:
|
|
|
|
```javascript
|
|
'&:hover': {color: 'red'}`
|
|
```
|
|
|
|
Children can be matched by using normal CSS selectors. This makes it possible to customize Ant components as well:
|
|
|
|
```javascript
|
|
'.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](style-guide.mdx). The colors exposed here handles dark mode automatically, so it's recommended to use those colors over hardcoded ones.
|
|
|
|
```javascript
|
|
import {theme} from 'flipper-plugin'
|
|
```
|