CODEWITHSUNDEEP
javascriptcssreactjsbutton
Michael Ngo
Michael Ngo

Reputation: 13

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

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

Upvotes: 0

Views: 1735

Answers (1)

Akshay Mathur
Akshay Mathur

Reputation: 501

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;
}

Upvotes: 2

Related Questions