How to use @emotion/css - 10 common examples
To help you get started, we’ve selected a few @emotion/css 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.
opctl / opctl / webapp / src / components / Form / index.tsx View on Github 
export default function Form(
{
className,
children,
isValid,
onSubmit,
submitName
}: Props
) {
return (
<form> e.preventDefault()}
>
{children}
{
<input style="{{" type="submit" hidden="">
}
{</form>export const keyframes = (...args: *): Keyframes => {
let insertable = css(...args)
const name = `animation-${insertable.name}`
// $FlowFixMe
return {
name,
styles: `@keyframes ${name}{${insertable.styles}}`,
anim: 1,
toString() {
return `_EMO_${this.name}_${this.styles}_EMO_`
}
}
}export default function Form(
{
className,
children,
isValid,
onSubmit,
submitName
}: Props
) {
return (
<form> e.preventDefault()}
>
{children}
{
<input style="{{" type="submit" hidden="">
}</form>it('does not warn when valid values are passed for the content property', () => {
const style = css(validValues.map(value => ({ content: value })))
expect(console.error).not.toBeCalled()
expect(renderer.create(<div>).toJSON()).toMatchSnapshot()
})
</div>it('does not warn when valid values are passed for the content property', () => {
const style = css(validValues.map(value => ({ content: value })))
expect(console.error).not.toBeCalled()
expect(renderer.create(<div>).toJSON()).toMatchSnapshot()
})
</div>test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};
${imageStyles};
${blue};
`test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};
${imageStyles};
${blue};test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }test('object composition', () => {
const imageStyles = css({ width: 96, height: 96 })
css([{ color: 'blue' }])
const red = css([{ color: 'red' }])
const blue = css([red, { color: 'blue' }])
const prettyStyles = css([
{
borderRadius: '50%',
transition: 'transform 400ms ease-in-out',
':hover': {
transform: 'scale(1.2)'
}
},
{ border: '3px solid currentColor' }
])
const Avatar = styled('img')`
${prettyStyles};
${imageStyles};
${blue};
