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.

github opctl / opctl / webapp / src / components / Form / index.tsx View on Github external
export default function Form(
  {
    className,
    children,
    isValid,
    onSubmit,
    submitName
  }: Props
) {
  return (
    <form
      className={
        cx(
          css({
            padding: '1.2rem'
          }),
          className
        )}
      onSubmit={e => e.preventDefault()}
    >
      {children}
      {
        <input
          // include hidden submit to ensure enter always triggers submit
          // without submit input, browsers disable submit on enter
          type='submit'
          style={{ display: 'none' }}
        />
      }
      {
github emotion-js / emotion / next-packages / core / src / keyframes.js View on Github external
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_`
    }
  }
}
github opctl / opctl / webapp / src / components / Form / index.tsx View on Github external
export default function Form(
  {
    className,
    children,
    isValid,
    onSubmit,
    submitName
  }: Props
) {
  return (
    <form
      className={
        cx(
          css({
            padding: '1.2rem'
          }),
          className
        )}
      onSubmit={e => e.preventDefault()}
    >
      {children}
      {
        <input
          // include hidden submit to ensure enter always triggers submit
          // without submit input, browsers disable submit on enter
          type='submit'
          style={{ display: 'none' }}
        />
      }
github emotion-js / next / packages / core / __tests__ / warnings.js View on Github external
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 css={style} />).toJSON()).toMatchSnapshot()
})
github emotion-js / emotion / packages / core / __tests__ / warnings.js View on Github external
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 css={style} />).toJSON()).toMatchSnapshot()
})
github emotion-js / emotion / packages / styled / __tests__ / styled.js View on Github external
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};
github emotion-js / next / packages / styled / __tests__ / styled.js View on Github external
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};
    `
github emotion-js / next / packages / styled / __tests__ / styled.js View on Github external
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};
github emotion-js / emotion / packages / styled / __tests__ / styled.js View on Github external
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' }
github emotion-js / emotion / packages / styled / __tests__ / styled.js View on Github external
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};

@emotion/css

The Next Generation of CSS-in-JS.

MIT
Latest version published 1 month ago

Package Health Score

92 / 100
Full package analysis