Exploring External CSS in React
External CSS is a way of styling your React application by keeping styles in separate files, making them easier to manage and apply across your app. Using external CSS makes your code cleaner and helps you reuse styles in multiple components. Let’s go through how to set up external CSS in React, understand index.css and App.css, and create CSS files for individual components!
What is External CSS?
External CSS means writing your styles in a separate file with a .css extension and then linking it to your React components. This keeps styles organized and allows for better separation of concerns.
Why Use External CSS?
External CSS is beneficial because it allows for code reuse, consistency, and easier management of styles across your app. By keeping styles outside the component code, you can quickly update your UI without modifying JavaScript code.
Understanding index.css and App.css in React
1. index.css – The Global CSS File
The index.css file is typically used for global styles that apply to your entire app. Styles in this file affect all components, so it’s ideal for broad styles, like font settings or background colors. You import index.css into your main JavaScript file (often index.js or main.js), which makes these styles available across your app.
Example of index.css
Here’s an example where we set a background color and font style for the whole app in index.css:
/* File: index.css */
body {
background-color: #f0f0f0; /* Sets a light gray background for the entire app */
font-family: Arial, sans-serif; /* Sets a global font */
}
To apply index.css styles, import it at the top of your main file:
// File: index.js or main.js
import './index.css';
2. App.css – The Main Component CSS File
App.css is often used to style the main App component. This is where we can place styles specifically for elements within App.js.
Example of App.css
Let’s add some styles to App.css that will style the main layout and some text in the App component:
/* File: App.css */
.app-container {
padding: 20px; /* Adds padding around the main content */
text-align: center; /* Centers text */
}
.app-title {
color: #333; /* Dark gray title color */
font-size: 24px; /* Larger font for main title */
}
Then, import App.css in your App.js file:
// File: App.js
import './App.css';
3. Creating Component-Specific CSS
Each component can have its own CSS file, which keeps styling organized and makes it easier to manage large projects. For example, let’s create a Header component with its own styles.
Step-by-Step: Creating a Component-Specific CSS File
1. Inside your src/components folder, create a new file named Header.jsx.
2. In the same components folder, create a CSS file named Header.css.
3. Add some styles to Header.css to style the header text and background as you like, and then import Header.css into Header.jsx to apply the styles.
/* File: Header.css */
.header-container {
background-color: #282c34;
color: white;
padding: 10px;
text-align: center;
}
.header-title {
font-size: 18px;
}
Finally, import Header.css into Header.jsx to apply the styles:
// File: Header.jsx
import './Header.css';
const Header = () => {
return (
<div className="header-container">
<h2 className="header-title">Welcome to My App</h2>
</div>
);
};
export default Header;
Why We Use className Instead of class
In React, we use className instead of class to define CSS classes. This is because class is a reserved keyword in JavaScript, and React uses className to avoid confusion. By using className, we can add CSS classes to our elements without conflicting with JavaScript’s class keyword.
Benefits of Using External CSS
- Keeps Code Organized: Using separate CSS files makes JavaScript code cleaner and easier to manage.
- Reusable Styles: You can reuse styles across multiple components without rewriting them.
- Global and Component-Specific CSS: With index.css for global styles and component-specific CSS files, you can keep your app’s styling structured and efficient.
Summary
External CSS in React is a great way to keep your code organized and style your app efficiently. By using index.css for global styles, App.css for main styles, and component-specific CSS files, you can create a well-organized and visually consistent React application.
Learn More
Inline css how to style react components using inline css
Export and import in react for modular code
Fat arrow functions in javascript and react
Dynamic values in react using jsx variables and expressions
What is jsx in react programming language
Creating your first program in react step by step guide
