如何使用 css 情感输入组件？

Question

I have this component and I can't use the theme with typescript

const buttonDisabled = css`
  color: ${({ theme }) => theme.color};
`;

How can I type this component?

error:  No overload matches this call.
  Overload 1 of 2, '(template: TemplateStringsArray, ...args: CSSInterpolation[]): SerializedStyles', gave the following error.
    Argument of type '({ theme }: { theme: any; }) => any' is not assignable to parameter of type 'CSSInterpolation'.
      Type '({ theme }: { theme: any; }) => any' is missing the following properties from type 'CSSInterpolation[]': pop, push, concat, join, and 28 more.

Answer 1

Take help from their official documentation it have everything related to create a component in emotion https://emotion.sh/docs/styled and Simplest way to create a component using emotion css is

import styled from '@emotion/styled'

const Button = styled.button`
  color: turquoise;
`

render(<Button>This my button component.</Button>)

pass props

import "./styles.css";
import styled from "@emotion/styled";

export const DIV = styled.div`
  background-color: pink;
  color: ${(props) => props.color};
`;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <DIV color="blue">Hello World</DIV>
    </div>
  );
}