Create React App

Create React App

  • Docs
  • Help
  • GitHub

›Styles and Assets

Welcome

  • About Docs

Getting Started

  • Getting Started
  • Folder Structure
  • Available Scripts
  • Supported Browsers and Features
  • Updating to New Releases

Development

  • Editor Setup
  • Developing Components in Isolation
  • Analyzing Bundle Size
  • HTTPS in Development

Styles and Assets

  • Adding Stylesheets
  • Adding CSS Modules
  • Adding Sass Stylesheets
  • Adding CSS Reset
  • Post-Processing CSS
  • Adding Images, Fonts, and Files
  • Loading .graphql Files
  • Using the Public Folder
  • Code Splitting

Building your App

  • Installing a Dependency
  • Importing a Component
  • Using Global Variables
  • Adding Bootstrap
  • Adding Flow
  • Adding TypeScript
  • Adding Relay
  • Adding a Router
  • Environment Variables
  • Making a Progressive Web App
  • Creating a Production Build

Testing

  • Running Tests
  • Debugging Tests

Back-End Integration

  • Proxying in Development
  • Fetching Data
  • Integrating with an API
  • Title & Meta Tags

Deployment

  • Deployment

Advanced Usage

  • Can I Use Decorators?
  • Pre-Rendering Static HTML
  • Advanced Configuration
  • Alternatives to Ejecting

Support

  • Troubleshooting
Edit

Adding a CSS Reset

This project setup uses PostCSS Normalize for adding a CSS Reset.

To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is index.css or App.css.

index.css

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

You can control which parts of normalize.css to use via your project's browserslist.

Results when browserslist is last 3 versions:

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

Results when browserslist is last 2 versions:

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

Browser support

Browser support is dictated by what normalize.css supports. As of this writing, it includes:

  • Chrome (last 3)
  • Edge (last 3)
  • Firefox (last 3)
  • Firefox ESR
  • Opera (last 3)
  • Safari (last 3)
  • iOS Safari (last 2)
  • Internet Explorer 9+
Last updated on 2019-4-5 by Hrusikesh Panda
← Adding Sass StylesheetsPost-Processing CSS →
  • index.css
  • Browser support
Create React App
Docs
Get StartedLearn React
Community
Stack OverflowSpectrumTwitterContributor Covenant
More
GitHubStar
Facebook Open Source
Copyright © 2019 Facebook Inc.