0

I've made a component (button) with CRA and react-bootstrap, and I exported it into bit-src, the component has rendered without its styling, however I've tried to push it with pure CSS and the component has rendered with its styling, so is bootstrap didn't fit with bit-src or I've missed something ?

Mustafa Alfar
  • 160
  • 1
  • 5
  • 16

3 Answers3

0

You need to import all from here. Please read careful documentation.

Milos N.
  • 4,416
  • 6
  • 18
  • 31
  • Locally every thing went well, the problem when export the component into bitsrc collection, bit render the component (ex. button) without its style from bootstrap, however bitsrc show in dependancy that react-bootstrap is imported ? – Mustafa Alfar Feb 13 '19 at 20:29
0

(disclaimer - I help maintain Bit)

For the playground to fetch the bootstrap design, you need to import it to the example Bit runs. Add an import statement for react-bootstrap in the example itself, and import the design from there.

itaymendel
  • 694
  • 7
  • 20
  • did you mean make it remotely in Bit page? if not I've imported the react-bootstrap in my entry point (index.js), and remotely in dependency Bit include react-bootstrap – Mustafa Alfar Feb 14 '19 at 14:52
  • can you please share a link to the component itself? it's hard to help with the issue without the full context of the component and example code. – itaymendel Feb 14 '19 at 15:27
  • https://bitsrc.io/mustafa-alfar/test/buttons : useing react-bootstrap https://bitsrc.io/mustafa-alfar/test/date : using ant design – Mustafa Alfar Feb 14 '19 at 16:10
0

For anyone stuck in the same situation as I was. The problem was that when I imported the component with react-bootstrap in the project it was missing the css files required by react-bootstrap to render its styling. So the solution was to install react-bootstrap and bootstrap.

npm install --save react-bootstrap bootstrap

And add an import for the css file in index.js

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

Inshort just following the get stated section of react-bootstrap solved the problem.

And I also think adding css import in the component itself may solve the problem but I have not tested it yet.

Faizan
  • 9
  • 4