How to use reactstrap only on a component in ReactJS?

Question

what happens, is that in the project that I am working with, there is no use of bootstrap and therefore, it is a problem when I install bootstrap to use Reactstrap. I would like the component that I am currently using, use what I require of Reactstrap and not alter my whole project, since it overrides my project styles and that is wrong.

In my component I import the following:

import {
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';

And my view:

import '../../../node_modules/bootstrap/dist/css/bootstrap.css';

I would like to know how to make use of Reactstrap only for my view and component without altering the whole project. Thank you!

Jonathan Irwin · Accepted Answer · 2019-02-20 17:08:20Z

1

I think your best bet is going to be extracting only the css from bootstrap.css that you require for that component - this will have the benefit of not bloating your site.

Copy only the css classes required and put them in your own css file - then import that.

answered Feb 20, 2019 at 17:08

Jonathan Irwin

5,8672 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mangux Over a year ago

That I just did! however, do you think you should put it in a separate css file or mix it with the main css?

Jonathan Irwin Over a year ago

I think a separate file - that way it won't interfere with other components on other pages

Mangux Over a year ago

Perfect, I just did it and everything works perfect. Thank you!

Collectives™ on Stack Overflow

How to use reactstrap only on a component in ReactJS?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related