Ionic 4 every component implementation and their styles are self-contained, in fact, native shadow-dom is used, so trully isolation in enforced.
However, in Ionic Apps there are global CSS (linked in <head>
) that needs to be included in order for an Ionic app to properly work.
Some of this "global CSS" style html
, normalizes,and configures the typography (font-family, font-size) of the whole page, so apps look like native.
-
normalize.css
Normalizes the CSS differences between browsers, it's based in https://necolas.github.io/normalize.css/ -
structure.css
Applies styles to<html>
and defaultsbox-sizing
toborder-box
. It's used to ensure scrolling behaves like native in mobile devices. -
typography.css
Changes thefont-family
of the whole page based in the mode selected (iOS or Material Design), it also applies global styles to<p>
,<h1>
,<h2>
... so everything looks like a native app. -
colors.css
Allows thecolor
prop to work across all Ionic components,ie:
<ion-button color="primary">
The following set of CSS files are optional and can safely be commented out if the application is not using any of those features.
- padding.css
Adds utils attributes to add a padding to any container ([padding]
,[padding-horizontal]
, `[padding-vertical]):
<ion-content padding></ion-content>
- float-elements.css
- text-alignment.css
- text-transformation.css
- flex-utils.css
Official Ionic starters are already properly configured so the following steps are not needed.
/** Basic CSS for Ionic Apps */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/colors.css";
/** Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
/** Basic CSS for Ionic Apps */
@import "~@ionic/core/css/normalize.css";
@import "~@ionic/core/css/structure.css";
@import "~@ionic/core/css/typography.css";
@import "~@ionic/core/css/colors.css";
/** Optional CSS utils that can be commented out */
@import "~@ionic/core/css/padding.css";
@import "~@ionic/core/css/float-elements.css";
@import "~@ionic/core/css/text-alignment.css";
@import "~@ionic/core/css/text-transformation.css";
@import "~@ionic/core/css/flex-utils.css";
exports.config = {
// ...
globalStyle: 'src/global.css'
// ...
};
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<link href="/build/global.css" rel="stylesheet">
<script src="/build/app.js"></script>
<!-- ... -->
</head>