From 379f7c788385cfc15fea8d0bb0a2a39f0c709b8d Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 24 Oct 2018 13:44:00 -0700 Subject: chore: use alternate syntax for styled --- packages/instant/src/components/ui/container.tsx | 5 ++++- packages/instant/src/components/ui/flex.tsx | 5 ++++- packages/instant/src/components/ui/input.tsx | 5 ++++- packages/instant/src/components/ui/text.tsx | 5 ++++- 4 files changed, 16 insertions(+), 4 deletions(-) (limited to 'packages/instant/src/components/ui') diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx index 7077d0aa3..76b570de7 100644 --- a/packages/instant/src/components/ui/container.tsx +++ b/packages/instant/src/components/ui/container.tsx @@ -30,7 +30,10 @@ export interface ContainerProps { opacity?: number; } -export const Container = styled('div')` +export const Container = + styled.div < + ContainerProps > + ` box-sizing: border-box; ${props => cssRuleIfExists(props, 'display')} ${props => cssRuleIfExists(props, 'position')} diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx index d4e14d979..5fa3fc95b 100644 --- a/packages/instant/src/components/ui/flex.tsx +++ b/packages/instant/src/components/ui/flex.tsx @@ -12,7 +12,10 @@ export interface FlexProps { className?: string; } -export const Flex = styled('div')` +export const Flex = + styled.div < + FlexProps > + ` display: flex; flex-direction: ${props => props.direction}; flex-wrap: ${props => props.flexWrap}; diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx index 9db7d1c4c..a884ff7cb 100644 --- a/packages/instant/src/components/ui/input.tsx +++ b/packages/instant/src/components/ui/input.tsx @@ -12,7 +12,10 @@ export interface InputProps { onChange?: (event: React.ChangeEvent) => void; } -export const Input = styled('input')` +export const Input = + styled.input < + InputProps > + ` font-size: ${props => props.fontSize}; width: ${props => props.width}; padding: 0.1em 0em; diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx index d23b0034d..fd72f6cc8 100644 --- a/packages/instant/src/components/ui/text.tsx +++ b/packages/instant/src/components/ui/text.tsx @@ -24,7 +24,10 @@ export interface TextProps { } const darkenOnHoverAmount = 0.3; -export const Text = styled('div')` +export const Text = + styled.div < + TextProps > + ` font-family: ${props => props.fontFamily}; font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; -- cgit