Skip to content

Instantly share code, notes, and snippets.

Avatar

Konstantin koss-lebedev

View GitHub Profile
View theme-provider-example.tsx
import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from 'styles/theme'
const App = () => (
<ThemeProvider theme={theme}>
/* your components */
</ThemeProvider>
)
View sc-with-provider.ts
import styled from 'styled-components'
const Header = styled.h1`
font-size: ${props => props.theme.fontSize.header};
color: ${props => props.theme.color.text};
`;
View sc-without-provider.ts
import styled from 'styled-components'
import theme from 'styles'
const Header = styled.h1`
font-size: ${theme.fontSize.header};
color: ${theme.color.text};
`;
View sc-with-provider-typo.ts
import styled from 'styled-components'
const Header = styled.h1`
font-size: ${props => props.theme.fontSize.header};
color: ${props => props.theme.colors.text};
`;
View sc-without-provider-typo.ts
import styled from 'styled-components'
import theme from 'styles'
const Header = styled.h1`
font-size: ${theme.fontSize.header};
color: ${theme.colors.text};
`;
// [ts] property 'colors' doesn't exist. Did you mean `color`?
View styled-component-without-props.js
import theme from 'styles'
export const Container = styled.div`
box-shadow: inset 0 6.2rem 0 0 ${theme.color.lightBackground};
border: 0.1rem solid ${theme.color.border};
border-radius: ${theme.borderRadius};
`
View styled-component-with-props.js
export const Container = styled.div`
box-shadow: inset 0 6.2rem 0 0 ${props => props.theme.color.lightBackground};
border: 0.1rem solid ${props => props.theme.color.border};
border-radius: ${props => props.theme.borderRadius};
`
View declaration-merging.ts
interface IUser {
firstName: string
lastName: string
}
interface IUser {
age: number
}
const user: IUser = {
View intersection-with-union-type.ts
type CreditCard = {
number: string
expMonth: number
expYear: number
}
// Type with union operator
type Chargeable = { token: string } | { cvc: number }
type ChargeableCreditCard = CreditCard & Chargeable
You can’t perform that action at this time.