Importing CSS Files in React

Importing CSS Files in React

Importing CSS Files in React. Creating components in React is fairly easy. If you're coming from a component-based framework, like Angular, you're already used to the markup+logic+style trio. By using JSX, you can put markup and logic together, in the same file.

Creating components in React is fairly easy. If you’re coming from a component-based framework, like Angular, you’re already used to the markup+logic+style trio. By using JSX, you can put markup and logic together, in the same file. This is really nice. So you ask me: “How to import CSS files in a React application?”. This is exactly what you will learn in this article. And I can give you a spoiler: it’s very simple.

Our example application

To illustrate this article, we are going to use a tiny React application:

const App = () => (
  <div>
    <MovieCard
      imagePath="https://i.imgur.com/mtR0tjU.jpg"
      title="The Godfather"
      text="A 1972 film directed by Francis Ford Coppola."
      oscars={3}></MovieCard>
    <MovieCard
      imagePath="https://i.imgur.com/mhzWZtB.jpg"
      title="The Untouchables"
      text="A 1987 film directed by Brian De Palma."
      oscars={1}></MovieCard>
  </div>
);

The component above prints two cards with basic information about classic movies. It depends on aMovieCard component, which renders a card with image, title, description and number of Oscars won. Let’s check it out:

const MovieCard = (props) => (
  <div className="movie-card">
    <img src={props.imagePath} className="movie-card__image" />
    <div className="movie-card__content">
      <h3 className="movie-card-content__title">{props.title}</h3>
      <p className="movie-card-content__text">{props.text}</p>
      <ul className="movie-card-content__oscars">
        { renderOscars(props.oscars) }
      </ul>
    </div>
  </div>
);

Finally, let’s see how the renderOscars function is implemented:

function renderOscars(oscars) {
  const output = [];

  for(let i = 0; i < oscars; i++) {
    output.push(
      <li className="movie-card-content-oscars__item" key={i}>
        <img src="https://i.imgur.com/w1wYJwi.png" />
      </li>
    );
  }

  return output;
}

Simple, isn’t it? Here’s how it looks:

Well, it’s raw, it’s ugly, but it works. Note that our markup uses the className attribute instead of class. Since JSX is an extension of JavaScript, this approach prevents conflicts with the reserved keyword class.

Now we need to style our application.

Setting up Webpack

To import CSS files in a React application, you need to configure the Style and CSS loaders first.

Install both loaders:

npm i css-loader style-loader --save-dev

Or, if you love Yarn:

yarn add --dev css-loader style-loader

Add this entry to the module.rules array, in your webpack.config.js file:

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

That’s all. Now you can run your application.

Importing a CSS file

First, we will create a file called app.css in the same directory as your App component. To make it easier to determine if it works, we’ll add the following rule to our new stylesheet:

.movie-card {
  background-color: red;
}

Now, we can import the app.css file in our application.

import React from 'react';
import './app.css'; // here is where the magic happens

const MovieCard = (props) => (
[...]

**Note:**In order to simplify things, I’ve saved both MovieCard and App components in the same file.

This is how your application should look like:

The next step is to beautify things.

Making our cards look like real cards

Let’s style each element individually.

First, we will normalize the rem/px proportion and make every element use the border-box sizing:

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

Now, we can style the card wrapper:

.movie-card {
  display: inline-block;
  height: 470px;
  width: 300px;
  border: 1px solid #DDD;
  border-radius: 10px;
  overflow: hidden;
  vertical-align: top;
  margin: 5px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}

The card content container:

.movie-card__content {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  padding: 15px;
}

The title and body:

.movie-card-content__title {
  font-size: 2rem;
  margin: 0;
}

.movie-card-content__text {
  font-size: 1.6rem;
  line-height: 2rem;
}

Finally, the Oscars list:

.movie-card-content__oscars {
  list-style-type: none;
  padding: 0;
}

.movie-card-content-oscars__item {
  display: inline-block;
}

.movie-card-content-oscars__item img {
  width: 25px;
}

And voilà:

This looks a lot better, right?

Conclusion

  • The CSS and Style loaders are necessary to import CSS files in a React application.
  • As with JavaScript, importing CSS files is made with the importkeyword.

Learn More

The Complete React Web Developer Course (2nd Edition)

Node with React: Fullstack Web Development

Beginner Full Stack Web Development: HTML, CSS, React & Node

React JS and Redux - Mastering Web Apps

React 16 - The Complete Guide (incl. React Router 4 & Redux)

MERN Stack Front To Back: Full Stack React, Redux & Node.js

The Web Developer Bootcamp

Build Responsive Real World Websites with HTML5 and CSS3

Web Design for Beginners: Real World Coding in HTML & CSS

Beginner Full Stack Web Development: HTML, CSS, React & Node

The Complete HTML & CSS Course - From Novice To Professional

Css is not used by jsx in ReactJS

I use ReactJS with Webpack and TypeScript. I'm trying to include CSS with React. But my CSS is not use by my React application. I created a global.d.ts file to declare my css module. I imported my css into my.tsx file but when I add a class to an element, nothing works.

I use ReactJS with Webpack and TypeScript. I'm trying to include CSS with React. But my CSS is not use by my React application. I created a global.d.ts file to declare my css module. I imported my css into my.tsx file but when I add a class to an element, nothing works.

I have already tried to install a css module but I didn't succeed. So, I just made the solution to create a global.d.ts file

global.d.ts :

declare module '*.css';

Hello.tsx

import * as css from './Hello.css';

export interface HelloProps {
compiler: string;
framework: string;
}

export class Hello extends React.Component<HelloProps, {}> {

render() {
return (
<form>
<p className={css.test}> Test </p>
</form>
);
}
}

Hello.css


.test {
color: red;
}

webpack.config.js

module: {
rules: [

 .....

 { test: /\.css$/, exclude: /node_modules/, use: ['style-loader', 'css-loader'] }

]
},

The word "test" is written in black. When it should be in red

7 Best Vue CSS Component for Your App

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.

1. Tailwindcss-Vue

Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.

Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip

2. @zeit-ui/vue

Vue implementation for Zeit Style, originating from Zeit Design.

@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.

Download: https://github.com/zeit-ui/vue/archive/master.zip

3. CSSeffectsSnippets

Click on the animation to copy it to your clipboard

Demo: https://emilkowalski.github.io/css-effects-snippets/

Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip

4. Vue Cirrus

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.

Demo: https://florianwoelki.github.io/vue-cirrus/#/

Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip

5. Vue CSS Modules

Seamless mapping of class names to CSS modules inside of Vue components.

Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip

6. BG MixMaster 90 — CSS Background Grid /Pattern Generator

make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.

Download: https://codepen.io/jasesmith/pen/YZEYRL

7. CSSOBJ

CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.

CSS in JS solution, create CSSOM and CSS rules from js, features:

  • CSS Rules create and diff
  • CSS modules with local class
  • Auto vendor prefixer
  • Media query for old browsers
  • Dynamically change CSS

Demo: https://cssobj.github.io/cssobj-demo/

Download: https://github.com/cssobj/cssobj/archive/master.zip

Why ReactJS is better for Web Application Development?

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web

Web Application Development is essential for a business in today’s digital era. Finding the right platform for Web Application Development is important for building an effective Web Application that can enhance the overall customer engagement. Here’s what makes ReactJS a better option for building your next Web Application.