Typescript types for css prop in emotion

user_14544203 0
Viewed 963

I am migrating a project from styled-components to emotion, but have a problem with the css prop object.

In styled-components I write reusable styles like so:

import { css } from '@emotion/css'

const ButtonStyles = css<IButtonProps>`
opacity: 0;
${props => props.show ? css`
    opacity: 1;
`: css`
    pointer-events: none;
`}

But in emotion the css function doesn't take a generic type. So the props is invalid.

Any way to get this to work in emotion?

emotion typescript
1 Answers

You can do instead:

import { css } from '@emotion/css'

const ButtonStyles = (props: IButtonProps) => css`
  opacity: 0;
  ${props.show
    ? css`
        opacity: 1;
      `
    : css`
        pointer-events: none;
      `}
`;
user_18605400
Related