没前戏,废话不多说直接上代码

在ts项目中使用emotion,有几个特别的地方需要注意

1.import { css, jsx } from "@emotion/core";上必须加注解

/** @jsx jsx */
import { css, jsx  } from "@emotion/core"

2.词句注销无效 必须配合<Fragment>标签包裹,不能用<></>

其他方法都一样了看官网文档就可以了,贴个🌰吧

import React, { PureComponent ,Fragment} from "react";
import { Divider } from "antd";

//词句注销无效   必须配合Fragment标签不能用<></>
/** @jsx jsx */
import { css, jsx  } from "@emotion/core";
import{ DIVwrapper} from "./index.css"
// import { basicComponents } from "@/config/formConfig.js";

interface Iprops {
  name?: string;
  age?: number;
}

interface IState {
  count: number | string;
  value?: number;
}

export default class demo extends PureComponent<Iprops, IState> {
  constructor(props: Iprops) {
    super(props);
    this.state = {
      count: 1,
      value: 1,
    };
  }

  render() {
    return (
      <Fragment>
        <DIVwrapper >
          <Divider style={{ color: "#333", fontWeight: "normal" }}>
            基础字段
          </Divider>
          <ul
            css={css`
              height: 200px;
              border: 1px solid blue;
            `}
          ></ul>
        </DIVwrapper>
      </Fragment>
    );
  }
}

ECStack
21 声望0 粉丝

alert(1)alert(1)alert(1) ,