使用组件的 Ant Design 样式与使用 css 类的样式

Question

我最近开始使用 Ant Design，我注意到人们可以使用 React 组件和 css 类来解决问题。在文档中我找不到任何有关 css 类的内容，但我个人更喜欢 css 类方法。如何了解有关可用 css 类的更多信息，以便避免导入所有这些组件？

import 'antd/dist/antd.css';
import { Row, Col } from 'antd';

  <Row>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
    <Col xs={24} xl={8}>
      One of three columns
    </Col>
  </Row>

或者：

  <div className="ant-row">
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
    <div className="ant-col ant-col-xs-24 ant-col-xl-8">
      One of three columns
    </div>
  </div>

Answer 1

我不认为 Ant 适合与类一起使用。 React 组件保证 API、HTML 结构和 javascript 逻辑能够很好地协同工作。您可以尝试使用与类相同的 HTML 结构来重现 UI，但这并不容易维护。

如果您正在寻找基于 CSS 的框架，您应该查看 Tailwind CSS 或类似的库。