Question 281378 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do I change the colour of an imported button that seems to have default colours?

Imported a button from ICDS which seems to have a few defaults ie Primary buttons, Secondary buttons, Tertiary buttons, Icon buttons, Destructive buttons.

However I want to change it something different using using a purple – color="#5a3eab"

Currently the default colours seem to override any CSS changes I make. As you can see (from commented code) I have tried using color and background. Also tried making the changes in the actual button and css file.

Cant seem to find a solution to override the default theme to whatever colour I want to use.

ICDS Button component

CSS:

.button-with-margin {
  margin: 10px 0px 0px 5px;
  float: right;
  /* background: "#5a3eab"; */
  color: "#5a3eab";
}

.tsx:

import "./service.css";
import {
  IcButton,
  IcSectionContainer,
  IcSelect,
  IcTypography,
  SlottedSVG,
} from "@ukic/react";

</div>
        <IcButton
          loading={executingService}
          onClick={async () => await handleExecuteClick()}
          className="button-with-margin"
          variant="tertiary"
          // color="#5a3eab"
        >
          <SlottedSVG
            slot="left-icon"
            xmlns="http://www.w3.org/2000/svg"
            height="24px"
            viewBox="0 0 24 24"
          >
            <path d={mdiArrowRight} />
            <title>Copy Results</title>
          </SlottedSVG>
          Execute
        </IcButton>
      </div>
Tags:

2

Answers


  1. 0

    If you want to change the background color of the button, you’ll need to use the background-color property instead of background and you should remove the quotes around the color value.

    .button-with-margin {
  margin: 10px 0px 0px 5px;
  float: right;
  background-color: #5a3eab;
  color: #ffffff; 
}
    Login or Signup to reply.
  2. 0

    I think you’re just setting the color as string and it’s not working. You can check it out if you right click and inspect the button on your browser:

    enter image description here

    Try set the color as color: #5a3eab; instead of color: "#5a3eab";

    In addition, color is not a valid prop for the component IcButton. As you can see, I sent that property color="red" and it’s doing nothing.

    I think the confusion about double quotes comes here: when you sent anything to a React component prop it goes with double quotes "", if color was a valid prop for IcButton it would go as <IcButton color="#5a3eab" but in css it goes without "" and with : instead of = (color: #5a3eab;)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search