Skip to content

Instantly share code, notes, and snippets.

Konstantin koss-lebedev

Block or report user

Report or block koss-lebedev

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.