Ionic 4 has no default styling?

Ionic Framework
1

Does the Ionic 4 framework not include any default styling like the previous versions did? Started a default app and it looks like absolute shit. Buttons are just solid gray blocks instead of the bootstrap-esque style I’m used to. So far I’m REALLY not enjoying this upgrade. So much stuff changed for zero reason, so much stuff removed for zero reason, just making a whole lot more work I have to put in for zero gain. And the documentation so far is atrocious, either missing or flat-out wrong.

2

By default it should use the Material Design theme. Can you supply a screenshot of what you are seeing?

The upgrades Ionic were centered around their conversion to web components. So much of the theming is now done with CSS variables. That does require developers to rework their theming code. This upgrade did not happen over night, and the team has been really clear on the evolution of the framework. There are several migration guides available to assist Ionic 2/3 developers move to Ionic 4.

The docs are actively being updated (I know I assist the team when I can to provide more clarity), and can always be better. If you find something missing or wrong file an issue on Github. https://github.com/ionic-team/ionic-docs

3

ss
ss.png1910×965 39.6 KB

That is the basic sidemenu template, with the regular tutorial list replaced with sign up and login buttons from the v3 super tutorial:

  <div padding>
    <button ion-button block (click)="signup()">Sign Up</button>
    <button ion-button block (click)="login()" class="login">Login</button>
  </div>

Buttons have zero styling. Those 4 lines of code are the only thing I’ve changed in the default sidemenu project

4

That is because the button code changed in Ionic 4. In order for the button to be a web component, it is now:

<ion-button></ion-button>

The expand directive is now an attribute:

<ion-button expand="block">

The updated docs are at: https://ionicframework.com/docs/api/button

The guide for migration can be found at: https://ionicframework.com/docs/building/migration

5

Thanks. Guess I’m gonna have to relearn everything. I had just gotten comfortable with v3 too.