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

Question

我有这个组件，但我不能将主题与打字稿一起使用

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

如何输入这个组件？

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

从他们的官方文档中获取帮助，它包含与创建情感组件相关的所有内容https://emotion.sh/docs/styled 使用情感 css 创建组件的最简单方法是

import styled from '@emotion/styled'

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

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

传递道具

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>
  );
}

如果你只想使用 css

import "./styles.css";
import {css} from '@emotion/css';

const color = 'blue';

export const buttonDisabled = css`
  color:${color}
`;

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