c0f902f81a
Summary: React 16 is not compatible with react-emotion 9 (it prints warnings, see also https://github.com/emotion-js/emotion/issues/644). So we should upgrade to 10. Reviewed By: mweststrate Differential Revision: D18905889 fbshipit-source-id: c00d2dbbadb1c08544632cb9bfcd63f2b1818a25
73 lines
2.2 KiB
Markdown
73 lines
2.2 KiB
Markdown
---
|
|
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';
|
|
|
|
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 {FlexRow, styled} from 'flipper';
|
|
|
|
const Container = styled(FlexRow)({
|
|
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 colors module contains all standard colors used by Flipper. All the available colors are defined in [`src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this:
|
|
|
|
```javascript
|
|
import {colors} from 'flipper'
|
|
```
|