0

I have a problem with using react-bootstrap and styled component because when I need to style a component like "Col" after that I import that from two files like that :

import Col from "react-bootstrap";
import Col from "styled-Component";

so when I using styled component I should not use react-bootstrap??

Taghi Khavari
  • 6,272
  • 3
  • 15
  • 32
abdelrhman
  • 19
  • 4
  • check [this](https://stackoverflow.com/questions/34714947/how-to-import-two-classes-by-the-same-name-in-javascript-es6), will surely answer your question. and next time do a research first please. peace – Eldshe Jan 03 '21 at 11:02

1 Answers1

1

You should be able to import with a different name:

import {Col as BootstrapCol} from "react-bootstrap";
import {Col as StyledCol} from "styled-Component";
Mike Flynn
  • 391
  • 2
  • 7
  • thats what i mean when i use the Col like this it will do two jobs i mean will work like a styled component and grid ? – abdelrhman Jan 03 '21 at 11:29
  • You can't have a single component be both at the same time, you must choose which component you are using, but this method should allow you to use both a Col from react and a Col from styled-component to be used in the same page in different spots. – Mike Flynn Jan 03 '21 at 11:40