0

I'm using Ant Design in my react project. I wanna use Ant Design components without their default class names.

Pay attention to the following code:

import { Typography } from "antd";

const { Title } = Typography;

~~

<Title level={4}> ...

Causes to have below:

<h4 class="ant-typography" ...

And its CSS:

// in the less file:
h4.ant-typography {
    // some css
}

So when I add my class name to the component the priority of the class name of Ant Design component is higher than mine!

My class name is .root-23-07. this priority number is 10 but because of using tag name in less file the priority number of And Design CSS selection is 11. so the Ant Design styles override mine.

I wanna use components of And Design without default class names. Is it possible?

  • 1
    Can't you override the CSS? Check [this](https://stackoverflow.com/questions/11178673/how-to-override-important) or [this](https://stackoverflow.com/questions/20954715/how-to-override-the-properties-of-a-css-class-using-another-css-class/20954771) – ravibagul91 Sep 24 '19 at 03:55
  • You can't, and its not making sense if you could do so. You can override them. – Dennis Vash Sep 24 '19 at 11:02
  • You asked about CSS and not mentioned about JSS – Dennis Vash Sep 24 '19 at 16:26

1 Answers1

0

If I understand your question correctly, no, you cannot use antd without having the underlying class names. Because React outputs raw html and css, not having the class names would result in not having any styling outside the css you provide.

You will either need to make your classes match the specificity level, or use !important

Matthew Weeks
  • 920
  • 9
  • 30
  • Thanks for your effort dear Matthew, using `!important` is my last solution for this issue, and I did it for releasing project. But I saw we could import antd components just like `import Title from "antd/es/typography/Title"` or `import Title from "antd/lib/typography/Title"`. I guessed maybe this importing doesn't contain the styles. –  Sep 24 '19 at 04:50
  • The way you import the components does not effect the styling. There are two ways to load styles however, you can load all the antd css with something like `import 'antd/dist/antd.css';` or for an individual component like `import 'antd/es/button/style';`. Either way, once you import these styles they will exist for all components in the app. Theoretically you could not import the antd css, but then you'd have to write styles for all of the components yourself. – Matthew Weeks Sep 24 '19 at 14:05