Style React components

web
mobile

Author: Dawid Adach

-

Now when we know what we want to build, let's get down to work. 

1. Application frame


Replace the content of the index.js file with the following code: 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import '@fortawesome/fontawesome-free/css/all.min.css';
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
class App extends Component {
    state = {};
    render() {
    return <React.Fragment>Schedule app </React.Fragment>;
    }
}
ReactDOM.render(<App />, document.getElementById("root"));
     
Let's build a frame for our application — using the Bootstrap grid. First let's define two columns. To do this we update our render() functions with the following code:

render() {
    return (
        <React.Fragment>
        <MDBContainer>
            <MDBRow>
            <MDBCol lg="6">Left column</MDBCol>
            <MDBCol lg="6">Right column</MDBCol>
            </MDBRow>
        </MDBContainer>
        </React.Fragment>
    );
}
    
Now we have two columns, however... frankly speaking — they are barely visible. Let's add a border to the columns so we can actually see how wide they are. There are a few ways to style our component in React, we will focus on the most common ones.

2. Inside index.js file (inline)


2.1 Inline (bad idea)

If you want to quickly adjust a style you can add it directly to each component as below:

<MDBCol style={{ border: "1px solid green" }} lg="6">Left column</MDBCol>
<MDBCol style={{ border: "1px solid blue" }} lg="6">Right column</MDBCol>            
      
Preview:



2.2 You can use variables:


style = {
    color: "red",
    fontSize: 10,
    border: "1px solid green"
    };
[...]
<MDBCol style={this.style} lg="6">Left column</MDBCol>
<MDBCol style={this.style} lg="6">Right column</MDBCol>
          
      
Preview:


Or even mix both: 

spacing = "3";
 [...]
<MDBCol
  style={{
    fontSize: this.spacing + "em",
    border: "1px solid blue"
  }}
  lg="6"
>
  Left column
</MDBCol>
      
Keep in mind that in most of the cases this is NOT a good idea unless you really know what you are doing. Instead, you should use the second option:

3. External Stylesheet files

    3.1 Open an index.css file (if it doesn't exist, create it under src/ folder)
    3.2  Add the following styles:

div[class^="col"],
div[class*=" col"] {
    border: 1px dotted black;
}           
    
    3.3 Import index.css file in index.js file:

import "./index.css";
    
    3.4 Remove all previous styles

Final code of index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import '@fortawesome/fontawesome-free/css/all.min.css';
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import "./index.css";
class App extends Component {
    state = {};
    render() {
    return (
        <React.Fragment>
        <MDBContainer>
            <MDBRow>
            <MDBCol lg="6">Left column</MDBCol>
            <MDBCol lg="6">Right column</MDBCol>
            </MDBRow>
        </MDBContainer>
        </React.Fragment>
    );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));
      
Preview:


Now you know how to style components in a proper way, let's build a frame for our app.


Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...