Having come from MDB jQuery, I'm used to how the various assets are intended to work, including the layouts and masks etc. After moving to the React edition, absolutely nothing I've done with the library has worked as the documentation says it should. Below is a very simple page that I've been working on for hours trying to get everything to work without some hacky garbage added in. All I'm trying to do is put some content on top of a masked background. Something that was incredibly straight-forward in the jQuery edition.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import {MDBContainer, MDBMask, MDBView, MDBCol, MDBRow, MDBCard, MDBBtn} from "mdbreact";

class Background extends React.Component {
  render() {
    return(
      <div className="background"/>
      )
  }
}

const App = () => {
  return(
      <MDBContainer fluid style={{padding: 0}}>
        <MDBView>
          <Background/>
          <MDBMask overlay="black-strong">
            <MDBRow middle>
              <MDBCol size={4} className="offset-4">
                <MDBBtn color="outline">Button</MDBBtn>
              </MDBCol>
            </MDBRow>
          </MDBMask>
        </MDBView>
      </MDBContainer>
  )
};

First problem: the container naturally does not expand to fit the viewport and style={{padding: 0} had to be added. The documentation clearly states: Use fluid prop for a full-width container, spanning the entire width of the viewport.

Second problem: the middle tag for aligning Rows to the center of the container doesn't seem to work either. The documentation clearly states: Use MDBReact alignment utilities to vertically and horizontally align columns.

Third problem: outline buttons don't seem to work as expected either. Adding outline to the button declaration does nothing. It remains rendered as btn-default. I had to add the following CSS to get an outline of any color.

.btn{
  border: 2px solid white !important;
  color: white !important;
}

The structure that used to apply in other editions of MDB don't seem to apply at all. That or the documentation is badly written, but what else is new.