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