CODEWITHSUNDEEP
javascriptreactjswebpackantd
mokiliii Lo
mokiliii Lo

Reputation: 637

Can't import Antd single component without messing up with the global style

I'd like to import a few components from the Ant Design React CSS library but I can't manage to get it working. I want to be able to import a single component without it messing up with the rest of my CSS.

Here's what I've tried:

import Button from 'antd/lib/button';
import 'antd/lib/button/style';

===> does not import the style.

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';

===> works, but messes up with the rest of the App

I have tried to do what is written here, import AntD on demand:

===> does not work, does not import the style

My question: is there a step-by-step guide to do what I want?

I'm not the only one who wants to do that and has problems, here, a guy on Reddit, I found many others links and have tried every single thing, absolutely nothing worked.

Thanks!

Upvotes: 12

Views: 8375

Answers (4)

Rodrigo ELoy Cavalcanti
Rodrigo ELoy Cavalcanti

Reputation: 21

You could try to import the index of the antd css file itself, like this:

import 'antd/lib/spin/style/index.css';

Upvotes: 2

raychz
raychz

Reputation: 1175

In your global style.css file, try:

@import '~antd/dist/antd.css';

Upvotes: 1

hello world
hello world

Reputation: 1755

import { Spin, Icon } from 'antd';
import 'antd/lib/spin/style/css';

worked for me antd version 3.17.0

Upvotes: 3

U.Rush
U.Rush

Reputation: 458

import {Button} from 'antd'
import 'antd/lib/button/style';

worked for me...

what do you mean by

'===> does not import the style.`

???

Upvotes: 3

Related Questions