Experience Builder + reactstrap/bootstrap proper use

[Sam-Berg_VHB]

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

[KevinHibma-EsriCA]

Hi @Sam-Berg_VHB - I'm not on the ExB team, so this is just my best "guess", but I believe you should be using the jimu-ui components always. Per the doc, https://developers.arcgis.com/experience-builder/guide/widget-ui/ it says when using jimu-ui you get the bootstrap CSS classes applied. I'd suspect that using the reactstrap reference would give you trouble with CSS.

import { Checkbox, TextInput, Select, Option, Button, Label, Input,  Container, Row, Col, Link  } from 'jimu-ui';

You can see the samples throughout using jimu-ui:  https://github.com/Esri/arcgis-experience-builder-sdk-resources/search?p=1&q=jimu-ui  vs 0 references to reactstrap: https://github.com/Esri/arcgis-experience-builder-sdk-resources/search?q=reactstrap 

[Sam-Berg_VHB]

Thank you @KevinHibma-EsriCA.  I actually just found expected results when pulling in reactstrap components and bootstrap.css simply using the following:

import { Button, Form, FormGroup, Label, Input, FormText, Alert} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

I definitely understand the best practice to use jimu-ui first whenever possible though.  Even with jimi-ui I did not see default bootstrap styles (for the FormGroup for example) applied until running the css import in the custom widget though. 

[Sam-Berg_VHB]

I am now seeing the conflicts between bootstrap.css and jimu-ui.css.  For example bringing in the bootstrap makes some buttons in the app transparent like a sidepanel collapse button.  So how do you get form control styling is the current question I have.