How do you override the css for toggle buttons from react bootstrap?

Question

I have toggle buttons that I want to have a different color scheme/theme from the default. Ideally, I would want to just be able to use the variants, but toggle buttons from react-bootstrap don't support using the variants the other buttons can. I tried following a solution I saw from here. While I have been able to get the color to change, I have not been able to get the active color to change at all.

const { state, dispatch } = useStateProvider();
    const skills = state.sponsorManager.getSkillsForRankFromSponsor('f', state.sponsor);

    const [checked, setChecked] = React.useState(false);

    let skillCards = skills.map(v => (
        <ToggleButton
            className="untoggled-button"
            id={v.id}
            key={v.id}
            value={v.id}
            onClick={(e) => { console.log(e.currentTarget); setChecked(e.currentTarget.checked) }}
        >
            {v.displayName}
        </ToggleButton>
    ));

    return (
        <div>
            <ToggleButtonGroup type="checkbox">
                {skillCards}
            </ToggleButtonGroup>
        </div>
    )

App.css
.untoggled-button {
  /* background-image: green !important; */
  background-color: green !important;
  color: white;
}
.untoggled-button.active {
  background-color: red !important;
}

Codepen

Akshay Mathur · Accepted Answer · 2021-11-09 06:46:37Z

2

your state variable checked was toggling between false and undefined.

Please try the below suggestion, Tested this in the sandbox and it works as per your requirement.

Added a separate button component that maintains a separate state for individual buttons. This way you will be able to re-use this button component multiple times.

In your index.js, modify the code like this

//index.js
import React from "react";
import ReactDOM from "react-dom";
import { ToggleButtonGroup, ToggleButton } from "react-bootstrap";
import "./styles.css";


function CustomButton({type,uId}) {
  const [checked, setChecked] = React.useState(false);

  return (
    <ToggleButtonGroup type={type}>
    <ToggleButton
      className={checked ? "untoggled-button-active" : "untoggled-button"}
        id={uId}
        key={uId}
        value={uId}
      onClick={(e) => {
        console.log(e.currentTarget);
        setChecked(!checked);
      }}
    >
      button
     </ToggleButton>
    </ToggleButtonGroup>
      
  )

}

function App() {

  return (
    <div>
      <CustomButton type="checkbox" uId="1"/>
      <CustomButton type="checkbox" uId="2"/>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

And modify your style.css like this

body {
  background-color: #404040;
}

.untoggled-button {
  /* background-image: green !important; */
  background-color: green;
  color: white;
}
.untoggled-button-active {
  background-color: red;
}

edited Nov 9, 2021 at 6:46

answered Nov 8, 2021 at 5:47

Akshay Mathur

5015 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Ngo Over a year ago

Thank you! This worked for one button. However, when adding in a second one, both buttons change to be the same color. They also don't go from green to red, but instead from green to blue. Any ideas on that?

Akshay Mathur Over a year ago

I have modified my answer as per your comment. Please have a look.

Collectives™ on Stack Overflow

How do you override the css for toggle buttons from react bootstrap?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related