Styling

We have primarily used CSS frameworks and libraries to style our React application. If you want to gain more control over styling, you must write your own CSS. There are several different ways you can incorporate and apply your styling rules to React components.

Global Style File

Add the global styles to the "index.html" file. In this case, you should place your CSS files inside the public folder.

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>React App</title>
+     <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <div id="root"></div>
    </body>
  </html>

Alternatively, you can place the CSS files inside the src folder and import them into your JavaScript!

  import ReactDOM from "react-dom";
  import App from "./App";
+ import "./styles.css";

  ReactDOM.render(
    <App />, 
    document.getElementById("root")
  );

This approach is particularly useful when you want to apply general styling rules to all components.

Per-component Style Files

Create an individual style file for each component and import it, thus dividing the styling into multiple files.

  import ReactDOM from "react-dom";
  import App from "./App";
+ import "./Index.css";

  ReactDOM.render(
    <App />, 
    document.getElementById("root")
  );

+ import "./App.css";

  function App() {
    return (
      <div>
        Hello, React!
      </div>
    );
  }

  export default App;

The advantage of this approach over using a global style file is that individual style files can be imported dynamically when a component is required.

Inline Style

Add inline styles to React components or elements.

function App() {
  return (
    <div style={{ "margin": "1px", "padding": "5px" }}>
      Hello, React!
    </div>
  );
}

export default App;

Note the use of double curly brackets, {{ /* style rules */ }}. This notation is employed because the styles are provided in the form of a JavaScript object inside JSX.

Alternatively, you can store the styles in a JavaScript object and bind it to components.

const styles = {
  header: {
    margin: "1px",
    padding: "5px",
  },
  title: {
    fontSize: "16px",
  },
}

function App() {
  return (
    <div style={styles.header}>
      <div style={styles.title}>Hello, React!</div>
    </div>
  );
}

export default App;

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. For example, we write fontSize instead of font-size. This convention is consistent with how we write HTML attributes in JSX.

Inline styling is especially useful when you have a few style definitions. They are often employed to override other (global) style specifications at the local level.

CSS Modules

This approach uses individual style file per component. First, however, it imports the style file as a JavaScript object.

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

function App() {
  return (
    <div style={styles.header}>
      <div style={styles.title}>Hello, React!</div>
    </div>
  );
}

export default App;

Note the style file name must end in module.css. The advantage of this approach over defining style objects in the JavaScript file is twofold. First, you can use regular CSS strings for style properties. Second, it keeps styling separate from your JavaScript code, which many consider good practice.

Other Approaches!

There are several other ways to style React components, namley using CSS-in-JS or Styled-Components libraries.

CS280 Homepage