How to use @emotion/primitives - 5 common examples
To help you get started, we’ve selected a few @emotion/primitives examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
emotion-js / emotion / packages / babel-plugin / __tests__ / styled-macro / __fixtures__ / primitives-other-name.js View on Github 
import something from '@emotion/primitives'
something.View`
color: hotpink;
`
something.View({})import styled from '@emotion/primitives'
styled('SomeFakeComponent')`
color: hotpink;
`
styled('SomeFakeComponent')({})
styled.View`
color: hotpink;
`
styled.View({})import styled from '@emotion/primitives'
styled('SomeFakeComponent')`
color: hotpink;
`
styled('SomeFakeComponent')({})
styled.View`
color: hotpink;
`
styled.View({})gray: kind('#8492A6', 'white'),
}
const getScale = ({ scale = 'normal' }) => scales[scale]
const getKind = ({ kind = 'primary' }) => kinds[kind]
const ButtonStyled = styled.TouchableOpacity`
${getKind};
${getScale};
cursor: pointer;
margin: 3px 5px;
border: 0;
border-radius: 3px;
`
const Text = styled.Text`
${getScale};
width: 100%;
padding: 0;
color: white;
text-align: center;
color: ${p => kinds[p.outline]};
`
export const Button = ({
scale = 'normal',
kind = 'primary',
outline = false,
children,
}) => (color: ${color};
transition: all .3s;
`
const kinds = {
primary: kind('#1FB6FF', 'white'),
secondary: kind('#5352ED', 'white'),
cancel: kind('#FF4949', 'white'),
dark: kind('#273444', 'white'),
gray: kind('#8492A6', 'white'),
}
const getScale = ({ scale = 'normal' }) => scales[scale]
const getKind = ({ kind = 'primary' }) => kinds[kind]
const ButtonStyled = styled.TouchableOpacity`
${getKind};
${getScale};
cursor: pointer;
margin: 3px 5px;
border: 0;
border-radius: 3px;
`
const Text = styled.Text`
${getScale};
width: 100%;
padding: 0;
color: white;
text-align: center;
color: ${p => kinds[p.outline]};
`@emotion/primitives
> Style and render primitive interfaces across multiple targets with emotion
