CODEWITHSUNDEEP
reactjsantd
JangoCG
JangoCG

Reputation: 976

Ant Design styling with components vs styling with css classes

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>

Upvotes: 1

Views: 974

Answers (1)

carlesba
carlesba

Reputation: 3156

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.

Upvotes: 2

Related Questions