CSS Grid Layout does not work when MDBREACT added to create-

Topic: CSS Grid Layout does not work when MDBREACT added to create-react-app project

Mike.Thomson free asked 4 years ago

I wanted to test MDB with an existing React App and found CSS layouts not working as expected. Further testing showed that if I simply install React via Create React app and then add mdbreact then things will not work as expected but they will if you install the download , run npm install and then npm remove-demo. For both scenarios my package.json file was identical.

To clarify - all I did to produce incorrect result was

npx create-react-app myTest

cd mytest

npm add mdbreact (Then add App.js and App.css to src folder)

npm start

enter image description here The screenshot shows correct & incorrect results as well as the basic test code.

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

Add comment

Konrad Stępień staff answered 4 years ago

0 0 Best answer

Hi <a href="/profile/?id=84623" target="_blank" rel="nofollow">@Mike.Thomson</a>,

I did test your commands and everything works correctly for me.

I did:

<ul>
<li><code>npx create-react-app my-test</code></li>
<li><code>cd my-test</code></li>
<li><code>npm add mdbreact</code>

Then I added this code:

<pre class="prettyprint"><code>import React from 'react';
import './App.css';
import { MDBContainer, MDBRow, MDBCol } from 'mdbreact';

function App() {
 return (
 <MDBContainer>
 <MDBRow>
 <MDBCol md='8'>
 .col-md-8
 <MDBRow>
 <MDBCol md='6'>.col-md-6</MDBCol>
 <MDBCol md='6'>.col-md-6</MDBCol>
 </MDBRow>
 </MDBCol>
 <MDBCol md='4'>.col-md-4</MDBCol>
 </MDBRow>
 </MDBContainer>
 );
}

export default App;
</code></pre></li>
<li>And this css

<pre class="prettyprint"><code>.col-md-8,
.col-md-6,
.col-md-4 {
 padding: 1rem;
 background-color: #33b5e5;
 border: 2px solid #fff;
 color: #fff;
 text-align: center;
}
</code></pre></li>
<li><code>sudo yarn start</code> (because I use Linux) </li>
</ul>

And this looks like that: <img src="https://usercontent.mdbootstrap.com/mdb-images/support/c5ab7edc-2716-4684-ab22-0d35d4806839-screenshot_28.jpg" alt="enter image description here" title="">,

You are sure, that nothing overwrites your styles?

Please insert min. 20 characters.

Hi @Mike.Thomson,

I did test your commands and everything works correctly for me.

I did:

npx create-react-app my-test
cd my-test

npm add mdbreact

Then I added this code:

import React from 'react';
import './App.css';
import { MDBContainer, MDBRow, MDBCol } from 'mdbreact';


function App() {
  return (
  <MDBContainer>
    <MDBRow>
      <MDBCol md='8'>
        .col-md-8
        <MDBRow>
          <MDBCol md='6'>.col-md-6</MDBCol>
          <MDBCol md='6'>.col-md-6</MDBCol>
        </MDBRow>
      </MDBCol>
      <MDBCol md='4'>.col-md-4</MDBCol>
    </MDBRow>
  </MDBContainer>
  );
}

export default App;

And this css

.col-md-8,
.col-md-6,
.col-md-4 {
  padding: 1rem;
  background-color: #33b5e5;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
}

sudo yarn start (because I use Linux)

And this looks like that: enter image description here ,

You are sure, that nothing overwrites your styles?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: 4.22.1
Device: PC
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Mike.Thomson

149Support score
11Questions 9Answers 0Snippets