There is more than one way to style your React app using CSS. In this blog, I will cover two of the most popular ways - (1)inline styling and (2)stylesheets. This read will be short and sweet. Let's style!

(1)Inline styling is useful for scoping the style to the element you want:

render() {

    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1x solid blue',
      padding: '8px',
      cursor: 'pointer'
    };

  return(
      <div className="App">
        <h1>Hi, I'm a React App!!</h1>
        <p>You are a great programmer!</p>
        <button style={style} onClick={this.toggleHandler}>Toggle Something</button>
         {SomeDynamicContent}
      </div>
     )
...

Notice in the above code that const style is defined inside the render method but above the return. Also, keep in mind that the keys must be in camelcase while the values are strings and should be in quotes.

(2)Stylesheets. Below is an example of how to create and use a CSS file to style a component in your React app.

// this code in the Person.css file

.Person {
    width: 60%;
    margin: 16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding: 16px;
    text-align: center;
}

Nothing too special about the code above. It is a CSS file created inside the same folder as the JS file below. This file structure is recommended to help avoid confusion. Even though the two files live in the same folder and have the same name, the code written in the Person.css file is not scoped to the Person.js file; it is global CSS code. Using the same name as the component makes it easier to avoid accidentally using the styling somewhere else in the app later on.

// this code is in the Person.js file

<div className='Person'>
   <p onClick={props.click}>I'm {props.name} and I am 
   {props.age} years old!</p>
   <p>{props.children}</p>
   <input type="text" onChange={props.nameChange} value=. 
   {props.name}/>
</div>

In the above code, you will notice the following line <div className='Person'>. Again, using "Person" is a good naming practice to help keep styling organized in your app.

// this code is in the Person.js file
import './Person.css'
...

<div className='Person'>
   <p onClick={props.click}>I'm {props.name} and I am 
   {props.age} years old!</p>
   <p>{props.children}</p>
   <input type="text" onChange={props.nameChange} value=. 
   {props.name}/>
</div>

Notice import './Person.css' in the code snippet above. The stylesheet must be imported into the component. What do you notice about './Person.css'? You can tell from './' that the Person.css file resides in the same parent folder as the component it will style - Person.js. Any guess on what the parent folder is named? If you guessed "Person", you are wrong. Just kidding. Of course, it's "Person".

Recap

There are two popular options for styling with CSS in React. The most popular is (1)inline styling. Using inline styling also has the benefit of scoping the code to the element that you want and can be written in the same file. (2)Stylesheets are also common and it is best to pay attention to your file naming. This will help you avoid accidentally mixing up where the stylesheet is used in your app. Also, don't forget to import the stylesheet to the component you wish to use it in.

I hope you learned something! As always, please feel like, share, and leave feedback if you found value in my work.

This post is part of a series that I am writing on React. Check out these 👇