diff options
-rw-r--r-- | packages/instant/src/components/ui/container.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/components/ui/flex.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/components/ui/input.tsx | 5 | ||||
-rw-r--r-- | packages/instant/src/components/ui/text.tsx | 5 |
4 files changed, 16 insertions, 4 deletions
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<ContainerProps, 'div'>('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<FlexProps, 'div'>('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<HTMLInputElement>) => void; } -export const Input = styled<InputProps, 'input'>('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<TextProps, 'div'>('div')` +export const Text = + styled.div < + TextProps > + ` font-family: ${props => props.fontFamily}; font-style: ${props => props.fontStyle}; font-weight: ${props => props.fontWeight}; |