Experience Builder + reactstrap/bootstrap proper use

Question

Hi, I have a framework question about ArcGIS ExB.  Thanks for any input.  As documented Experience Builder uses reactstrap under the hood for widget ui.  When creating a custom widget aiming to target specific components in reactstrap such as forms http://reactstrap.github.io/components/form/, what is the proper way to reference these components?  I am seeing that if we import the components import in the widget :

{ Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

...the resulting widget in the experience is not referencing the elements correctly including the bootstrap CSS and the components are basically not styled at all.

I am hoping to clarify how and when to target jimi-ui, reactstrap, and direct bootstrap in widget ui creation.

Thanks for any information.

Sam

TimWestern · Answer

Additional information:

The button shown is actually a screen cap image, so maybe its doing this because I don't have a theme setup yet when going through the tutorial?

TimWestern · Answer

I actually ran into this question while looking at the Quick Sample for Widget UI in the Builder Guide here:

https://developers.arcgis.com/experience-builder/guide/widget-ui/#quick-sample

I reproduced this code, but the button is gray it picks up no styles form jimu-core at all that I see.  yet in the Tutorial it looks like it should be blue as a primary button.  It made me wonder if my setup of the Experience Builder Client was not importing the CSS for bootstrap propertly or if it was a reactstrap problem.

Marc_Alx · Answer

For all those wondering, here's a workaround.

n.b for this example I use scss as a css pre-processor.

As mentioned here, importing bootstrap breaks some part of EXB UI, so basically avoid the following line:

//in a scss file
@import 'bootstrap/dist/css/bootstrap.css';

But how to bypass ? First use as much as possible jimu-ui or clacite if you still need reactstrap try to import only part of bootstrap you need.

e.g let's say you need to use reacstrap's Carousel, import only needed part in your style :

//in a scss file
//global
@import 'bootstrap/scss/_functions.scss';
@import 'bootstrap/scss/_variables.scss';
@import 'bootstrap/scss/_mixins.scss';
//for carousel
@import 'bootstrap/scss/_carousel.scss';

Alternatively, you may also try the following, in a div that encloses your widget:

//in a scss file
@import 'bootstrap/dist/css/bootstrap';//no .css here