Urgent Help customising components

Ionic Framework Ionic Angular
1

I am finding it challenging to customise simple ionic components (v7). Take the following example snippet. I tried 3 or 4 other approaches before getting to this, so by this point, the code is rushed and ugly. Nonetheless, it still highlights that Ionic styles don’t seem to make any sense.

ion-button {
  // Rounded Corners
  --border-radius: var(--button-radius);

  // Defaults
  display: inline-flex; // Make sure button doesn't take full width by default
  align-items: center;
  justify-content: center;
  text-transform: none !important; // Disable uppercase globally for ion-buttons (need to force it!)
  padding: 0; // Ionic adds 5px padding top & bottom
  margin: 0; // remove outer margin (beyond the border-box)
  box-sizing: border-box !important;

  // Color theming (default="primary")
  &[color="secondary"],
  &[color="tertiary"] {
    --background: var(--app-bg) !important;           /* Transparent background for outline */
    --border-width: 1px !important;                 /* Add border width */
    --border-style: solid !important;               /* Solid border */
    --border-color: var(--ion-color) !important;    /* Border color matches the button color */
    --color: var(--ion-color) !important;           /* Text color matches the button color */
  }

The intent here is to allow me to set all my secondary / tertiary buttons to have consistent styling. In this case, I am attempting to make them follow the fill=“outline” styles. This is important as I want to reuse this custom scss button style code across multiple apps, which must be consistent.

However, the intended outcome is not achieved. Some of the styles are applied, others not - reasons unknown!? In the example above, the border is changed. But none of the colors are.

I’ve run into issue after issue trying to customise the simplest elements. For example, nothing I try allows me to change the text colour of a button when it is clicked. I have tried EVERYTHING I can think of. According to the docs, this shjould be as simple as --color-activated: …

The following code:

// Hover
        &:hover {
          text-decoration: underline;  // Adds an underline
          text-decoration-color: var(--ion-color-secondary, #02c3e8);  // Set the underline color to secondary
          text-underline-offset: 5px;
          text-underline-width: 1.5px;
        }
        --background-hover-opacity: 0.0 !important; // don't want background to show on hover

        // Activated
        &:active {
          --color: var(--ion-color-secondary, #02c3e8) !important;
          // --color: 'primary';
        }
        --color-activated: var(--ion-color-secondary, #02c3e8) !important; // text color when activated
        --background-activated-opacity: 0.0 !important; // remove background - md ripple still appears
        --ripple-color: var(--app-bg);

the underline works. The background goes away, as intended. But the text colour will NOT change.

Sorry, but this seems so arbitrary. Is there some reliable documentation I can follow so I get predictable outcomes?

2

To set the text color on pressed, for example, all you need to do is the following:

ion-button {
  --color-activated: #fff;
}

Check out Ionic’s example for other color changes - ion-button: Style Buttons with Custom CSS Properties

3

Hi all.

User error!

I was looking at the result in Storybook, while working in an NX Monorepo. All of which is like trying to read a book 100 yards away through binoculars while balancing on a rubber giraffe.

Storybook had not imported some of the ionic/angular/css files properly.

1 Like