CSS Styled React Components
Tags: react, css, beginners
Published: 2022-06-14 15:53:56

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. 

<h1>What We're Starting With</h1>

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:

![Treehouse on horizon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqzsxeklqg740ejpys5d.png)

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_.

<h1>How We Want Our Component To Look</h1>

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

**H1**

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

**H2**

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

<h1>OPTION #1: Inline Styling</h1>

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: 

![Styled treehouse on horizon component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qsjr090pf79jgis76va.png)

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. 

<h1>OPTION #2: Inline Styling Using Variables</h1>

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.

<h1>OPTION #3: Define a className and use CSS file</h1>

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';
```
or

```
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!