Skip to content
Permalink

Comparing changes

This is a direct comparison between two commits made in this repository or its related repositories. View the default comparison for this range or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: emotion-js/emotion
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: ef53d27f717b5986c56cb5eae6f02eb88c253394
Choose a base ref
..
head repository: emotion-js/emotion
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: d02f84e7002045389ef43d261b7c6f469b119fd5
Choose a head ref
Showing with 13 additions and 13 deletions.
  1. +13 −13 docs/typescript.md
26 changes: 13 additions & 13 deletions docs/typescript.md
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ Emotion includes TypeScript definitions for `emotion`, `react-emotion`, `preact-

## emotion

```typescript
```jsx
import { css } from 'emotion';

const titleStyle = css({
@@ -24,7 +24,7 @@ const subtitleStyle = css`

Typescript checks css properties in object style syntax using [csstype](https://www.npmjs.com/package/csstype) package, so following code will emit errors.

```typescript
```jsx
import { css } from 'emotion';

const titleStyle = css({
@@ -45,7 +45,7 @@ const subtitleStyle = css`

### HTML/SVG elements

```typescript
```jsx
import styled from 'react-emotion';

const Link = styled('a')`
@@ -59,7 +59,7 @@ const Icon = styled('svg')`
const App = () => <Link href="#">Click me</Link>;
```

```typescript
```jsx
import styled from 'react-emotion';

const NotALink = styled('div')`
@@ -74,7 +74,7 @@ const App = () => (

### `withComponent`

```typescript
```jsx
import styled from 'react-emotion';

const NotALink = styled('div')`
@@ -92,7 +92,7 @@ const App = () => <Link href="#">Click me</Link>

You can type the props of your styled components.

```typescript
```jsx
import styled from 'react-emotion'

type ImageProps = {
@@ -129,7 +129,7 @@ const Image1 = styled('div')<ImageProps>({

### React Components

```typescript
```jsx
import React, { SFC } from 'react'
import styled from 'react-emotion'

@@ -160,7 +160,7 @@ const App = () => (

### Passing props when styling a React component

```typescript
```jsx
import React, { SFC } from 'react'
import styled from 'react-emotion'

@@ -201,9 +201,9 @@ const App = () => (
By default, the `props.theme` has `any` type annotation and works without error.\
However, you can define a theme type by creating a another `styled` instance.

_styled.typescript_
_styled.jsx_

```typescript
```jsx
import styled, { CreateStyled } from 'react-emotion'

type Theme = {
@@ -218,9 +218,9 @@ type Theme = {
export default styled as CreateStyled<Theme>
```

_Button.typescript_
_Button.jsx_

```typescript
```jsx
import styled from '../pathto/styled'

const Button = styled('button')`
@@ -240,7 +240,7 @@ Types are almost same with `react-emotion` package.

Basically same with `emotion`, except that you can pass your own context and options.

```typescript
```jsx
import createEmotion, { Emotion, EmotionOption } from 'create-emotion';

const context = {};