Two CSS Styling Options in React

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 👇

Rendering Conditionals in React

rwparrish ・ Oct 16 '20

#react #beginners #javascript #tutorial

React Basics

rwparrish ・ Oct 8 '20

#react #beginners #codenewbie #tutorial

Happy coding!

Comments

[shadowtime2000]

There are some more options other than these. Vercel's styled-jsx makes it a lot easier to avoid styling every component you use and css-modules allow you to do something like this:

import styles from './styles.module.css';

function Component(props) {
    return (
        <div className={styles.thisComponent}>
            <h1 className={styles.title}>Title</h1>
        </div>
    );
}

[rwparrish]

I'll have to look into this. Thanks for taking the time to share!

[Michael Parkadze]

I think a separate stylesheet is almost always better from inline styles for the simple reason as if you choose to use inline styling it clutters the entire file while having a separate styles.scss will make life easier as it separates the logic and the styling. If the situation demands it then and only then I use inline styling.

Also I recommend instead of having for example a Person.jsx and person.css file just make a folder called for example Person with index.jsx as the main file and a styles.scss file for the styles.

[rwparrish]

The separation of concerns is a good point. Thank you for sharing!