bed23c586b
Summary: allow-large-files See D34339758 Reviewed By: jknoxville Differential Revision: D34378570 fbshipit-source-id: ad451afc1774e6d38902d510629ce1b92457adf0
90 lines
2.9 KiB
Plaintext
90 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 which is based on [Ant Design](https://ant.design/).
|
|
In general, custom styling should be needed rarily, 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 customly styled components,
|
|
we are using [emotion](https://emotion.sh) to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their [Styled Components](https://emotion.sh/docs/styled) 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.
|
|
|
|
```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 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.
|
|
|
|
```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 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.
|
|
|
|
```jsx
|
|
const MyView = styled.div(
|
|
props => ({
|
|
fontSize: 10,
|
|
color: => (props.disabled ? 'red' : 'black'),
|
|
})
|
|
);
|
|
|
|
// usage
|
|
<MyView disabled />
|
|
```
|
|
|
|
Pseudo-classes can be used like this:
|
|
|
|
```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 will handle dark mode automatically, so it is recommended to use those colors over hardcoded ones.
|
|
|
|
```javascript
|
|
import {theme} from 'flipper-plugin'
|
|
```
|