在 Gatsby 和 Typescript 项目中，样式未应用于带有 Emotion 11 css 属性的子组件

Question

我正在使用 Emotion CSS prop 来设计我的 Gatsby / Typescript 应用程序。

我正在使用 Gatsby 2 和 Emotion 11。

例如我的 Header 组件我渲染了一个 Logo 组件：

/** @jsx jsx */
import { FC } from 'react';

import { jsx } from '@emotion/react';

import Logo from 'components/Logo';
import useSiteMetaData from 'hooks/useSiteMetadata';

import Styles from './Header.styles';
import { Props } from './Header.types';

const Header: FC<Props> = () => {
  const styles = Styles();
  const { title } = useSiteMetaData();

  return (
    <header css={styles.root}>
      <Logo siteTitle={title} css={styles.logo} />
    </header>
  );
};

export default Header;

但是在我的子组件的 css 属性上我得到一个 Typescript 错误：

Property 'css' does not exist on type 'IntrinsicAttributes & Props'.ts(2322)

我在下面添加到 tsconfig.json 并解决了 linting 错误：

{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"],
  }
}

但是我的 Header.styles.ts 中没有应用样式，所以我可以 overwrite/add 我的子组件（徽标）的某些样式？

Answer 1

你在css-prop docs中有这样的例子。

P 组件就像您的 Logo 组件一样，ArticleText 是您的 Header

const P = props => (
  <p
    css={{
      margin: 0,
      fontSize: 12,
      lineHeight: '1.5',
      fontFamily: 'sans-serif',
      color: 'black'
    }}
    {...props} // <- props contains the `className` prop
  />
)

const ArticleText = props => (
  <P
    css={{
      fontSize: 14,
      fontFamily: 'Georgia, serif',
      color: 'darkgray'
    }}
    {...props} // <- props contains the `className` prop
  />
)

你的意思是需要传递className属性，见相关.

在 Gatsby 和 Typescript 项目中，样式未应用于带有 Emotion 11 css 属性的子组件

Styles not applied at child component with Emotion 11 css prop in Gatsby and Typescript project

emotion

reactjs

react-props