CSS Styled React Components

#react #css #beginners

You're making React Components that have all the information that you had planned. The problem is that they're not looking how you had envisioned. We'll be taking a look at the options of styling your components without the need to download outside libraries.

What We're Starting With

For the remainder of this article, we'll be using a React Component with an image, an h1, and an h2. It will remain constant throughout, and we'll style it the same each time. We'll just use different methods to accomplish that.

Our barebones React Component without any styling:

import casaDelArbol from '../images/CSS-in-React.JPG'

function StyledReactComponent() {
  return (
    <div>
      <img src={casaDelArbol}/>
      <h1>Casa Del Arbol</h1>
      <h2>Banos, Ecuador</h2>
    </div>
  );
}

export default StyledReactComponent;

Which gives us:

We have a div that contains three elements: our img, h1, and h2. Our image is named "CSS-in-React.JPG" and is located in a folder called "images". We are importing it from there into our StyledReactComponent and giving it the name casaDelArbol.

How We Want Our Component To Look

Here's what we want to change in our component:

DIV

Change the background color
Give it a border
Round the corners

IMG

Make it smaller, not covering entire div
Give it margins
Round the corners

Center the text
Underline the text
Change the color
Decrease the margins

Center the text
Italicize the text
Change the color
Decrease the margins

OPTION #1: Inline Styling

We can style each element right inside the JSX of that component. We'll need to use the following syntax to achieve that:

style={{}}

A few things to note:

Make sure to use double curly brackets
CSS attributes are camelCase (text-align becomes textAlign)
A colon follows the attribute name
Attribute values are inside quotes
Multiple attributes can be used, separated by a comma

Here's our component using inline styling:

function StyledReactComponent() {
    return (
        <div style={{backgroundColor: ' #F8F0E3', width: '400px', border: '5px solid #6C5B7B', borderRadius: '10px'}}>
            <img style={{width: '90%', marginRight: '5%', marginLeft: '5%', marginTop: '10px', borderRadius: '5px'}} src={casaDelArbol}/>
            <h1 style={{textAlign: 'center', margin: '3px', color: '#355C7D', textDecoration: 'underline'}}>Casa Del Arbol</h1>
            <h2 style={{textAlign: 'center', margin: '3px', color: '#6C5B7B', fontStyle: 'italic'}}>Banos, Ecuador</h2>
        </div>
    );
}

Which returns:

We can hit enter and rearrange our code to place attributes on separate lines, but if we're using multiple attributes, inline styling can quickly make our code much more difficult to read. Inline styling is the quickest and easiest method to implement, but is best served in limited use. A possible example would be when you just want to change the bottom margin of an element.

OPTION #2: Inline Styling Using Variables

We can clear up our code a bit by creating a variable for each styled element with all our style attributes.

function StyledReactComponent() {

  const styledDiv = {
    backgroundColor: ' #F8F0E3', 
    width: '400px', 
    border: '5px solid #6C5B7B', 
    borderRadius: '10px'
  }
  const styledImg = {
    width: '90%', 
    marginRight: '5%', 
    marginLeft: '5%', 
    marginTop: '10px', 
    borderRadius: '5px'
  }
  const styledH1 = {
    textAlign: 'center', 
    margin: '3px', 
    color: '#355C7D', 
    textDecoration: 'underline'
  }
  const styledH2 = {
    textAlign: 'center', 
    margin: '3px', 
    color: '#6C5B7B', 
    fontStyle: 'italic'
  }

  return (
    <div style={styledDiv}>
      <img style={styledImg} src={casaDelArbol}/>
      <h1 style={styledH1}>Casa Del Arbol</h1>
      <h2 style={styledH2}>Banos, Ecuador</h2>
    </div>
  );
}

Note: Within our JSX, when we define our style={variable}, we need to use single brackets.

OPTION #3: Define a className and use CSS file

This is the method recommended in the React Docs, in which they state that "CSS classes are generally better for performance than inline styles."

Inside our CSS file:

.styled-div {
  background-color: #F8F0E3;
  width: 400px;
  border: 5px solid #6C5B7B;
  border-radius: 10px;
}

.styled-img {
  width: 90%; 
  margin-right: 5%; 
  margin-left: 5%; 
  margin-top: 10px; 
  border-radius: 5px;
}

.styled-h1 {
  text-align: center; 
  margin: 3px; 
  color: #355C7D; 
  text-decoration: underline;
}

.styled-h2 {
  text-align: center; 
  margin: 3px; 
  color: #6C5B7B; 
  font-style: italic;
}

And our squeaky clean React component:

function StyledReactComponent() {

  return (
    <div className='styled-div'>
      <img className='styled-img' src={casaDelArbol}/>
      <h1 className='styled-h1'>Casa Del Arbol</h1>
      <h2 className='styled-h2'>Banos, Ecuador</h2>
    </div>
  );
}

A few things to note:

className is camelCased in our React component
className is declared inside quotes
The dot prior to the class-name in our CSS file denotes that it is a class
Attributes in CSS have a dash when containing multiple words
CSS does not contain quotes or commas

Make sure to import your CSS file into your React project. If you are using one file, such as the index.css file to define all your styling for the project, you can import it at the top of your App component, the highest level component.

import '../index.css';

import './index.css';

depending on the location of the CSS file.

Another option is to create a CSS file specifically for this component, which contains all styles relevant to it. This CSS file can then be imported at the top of our StyledReactComponent file.

Happy coding!