没前戏,废话不多说直接上代码
在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>
);
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。