Customising ionic button/components in react

Hiiiij · June 23, 2021, 5:14pm

Hi there,

I’m having issues customizing ionic components using css variables & styled components in react… I’ve created a button component and I tried changing its --background-hover property both using styled components and normal css, however it doesn’t seem to be used correctly, any ideas?

Code Example:

github.com

Hiiiij/berlinCalling/blob/780074b370d2836bd4ccb37f15d73f6ffe0c188f/src/components/Button.tsx

import React from "react";
import styled from "styled-components";
import { IonButton, IonIcon, IonContent } from "@ionic/react";
import "./button.css";
export interface ButtonProps {
  fill?: "clear" | "outline" | "solid";
}

/**
 * Primary UI component for user interaction
 */

const StyledButton = styled(IonButton)`
  --background-hover: pink;
`;
export const Button: React.FC<ButtonProps> = ({ children }) => {
  // return <IonButton className="btn">{children}</IonButton>;
  return <StyledButton>{children}</StyledButton>;
};

EDIT: I’ve discovered this seems to be a bug in the “md” mode, if I switch the component’s mode to “ios” it seems to work fine and switch the hover color to pink

Thanks in advance!
Beta

Topic		Replies	Views
--background-hover on <ion-button> help please Ionic Framework	2	9318	August 22, 2019
Why can't I change the hover color for Ionic button Ionic React	2	3513	June 17, 2021
Using styled-components Ionic Framework	2	2695	April 11, 2020
is it good to use styled components instead ionic components in all project? Ionic React	3	1548	August 19, 2022
Urgent Help customising components Ionic Angular	2	25	November 11, 2024

Customising ionic button/components in react

Related topics