I am building my first spfx react webpart to be depoyed on SharePoint Online. I have trouble making react bootstrap work.

What i want to achieve is to open a form in a modal when the user click on a button. I am using react bootstrap to create a form and display it in a modal :



I include react bootsrap components this way in my component after installing the npm package :

import Form from 'react-bootstrap/Form';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';

react bootstrap needs bootstrap to be included for the styling to work. I first included bootrap css this way in the component tsx file :

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

All work fine and it is displayed properly but it has side effects on the Sharepoint UI, for example on other native sharepoint webparts.

So i used sass as described in this post to prevent leaking css: SPFX web part, CSS is leaking into the whole sharepoint site

Here is my custom scss file :

.my-app {
    @import '../../../../node_modules/bootstrap/scss/bootstrap.scss';

I import my custom .scss file this way in the component :

import "./bootsrap-custom.scss";

The button is rendered properly with the css class .my-app. But now that i use sass the Modal and the Form are rendered without any style. The modal is displayed without styling at the bottom of the page.

If i put the Form outside of the modal the bootstrap css is applied properly to the Form.

I don't understand why when using sass this way the Modal and every element in this Modal are not rendered properly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.