cc438e60ad
Summary: This updates the docs of Flipper to use Sandy, rather than `FlipperPlugin` class. Restructured the docs a bit as a result. Reviewed By: passy Differential Revision: D24991285 fbshipit-source-id: 66d5760c25cf9cf3983515433dfd64348d51db3d
74 lines
2.1 KiB
Plaintext
74 lines
2.1 KiB
Plaintext
---
|
|
id: styling-components
|
|
title: Styling 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 built-in components.
|
|
|
|
## Basic tags
|
|
|
|
For basic building blocks (views, texts, ...) you can use the styled object.
|
|
|
|
```javascript
|
|
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
|
|
|
|
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.
|
|
|
|
```javascript
|
|
import {Layout, styled} from 'flipper-plugin';
|
|
|
|
const Container = styled(Layout.Container)({
|
|
alignItems: 'center',
|
|
});
|
|
|
|
class MyComponent extends Component {
|
|
render() {
|
|
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.
|
|
|
|
```javascript
|
|
const MyView = styled.div(
|
|
props => ({
|
|
fontSize: 10,
|
|
color: => (props.disabled ? colors.red : colors.black),
|
|
})
|
|
);
|
|
|
|
// usage
|
|
<MyView disabled />
|
|
```
|
|
|
|
Pseudo-classes can be used like this:
|
|
|
|
```javascript
|
|
'&:hover': {color: colors.red}`
|
|
```
|
|
|
|
## 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.
|
|
|
|
```javascript
|
|
import {theme} from 'flipper'
|
|
```
|