Ant Design styling with components vs styling with css classes

user_5228754 0
Viewed 347

I recently started using Ant Design and I noticed people can solve the problem with React Components and css classes. In the docs I can't find anything regarding the css classes, But I personally prefer the css classes approach. How can I learn more about the available css classes so I can avoid importing all those Components?

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>

or:

  <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>
antd reactjs
1 Answers

I don't think Ant is meant to be used with classes. React components guarantee the API, the HTML structure and the javascript logic works well together. You could try to reproduce the UI using the same HTML structure with the classes but that won't be easy to maintain.

If you're looking for a CSS based framework, you should look at Tailwind CSS or similar libraries.

user_13441540
Related