react+antdpro+ts实现企业级项目四：注册页面实现及useEmotionCss的介绍

import React from 'react';
import { Form, Input, Button, Select } from 'antd';
import { useEmotionCss } from 'create-emotion-styled';
 
const { Option } = Select;
 
const RegistrationForm: React.FC = () => {
  const css = useEmotionCss`
    .form-title {
      color: #262626;
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 50px;
    }
  `;
 
  return (
    <div className={css}>
      <h2 className="form-title">注册</h2>
      <Form layout="vertical">
        {/* 省略其他表单项的定义 */}
        <Form.Item name="department" label="部门">
          <Select placeholder="请选择部门">
            <Option value="技术部">技术部</Option>
            <Option value="销售部">销售部</Option>
            <Option value="市场部">市场部</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary">注册</Button>
        </Form.Item>
      </Form>
    </div>
  );
};
 
export default RegistrationForm;

这段代码展示了如何在React组件中使用useEmotionCss来定义和使用CSS。它定义了一个简单的注册表单，并为其设置了基本的样式。这个例子使用了create-emotion-styled库来提供CSS样式，这是一个实用的库，可以帮助开发者在React项目中更好地管理样式。