Tengo botones de alternar que quiero tener un esquema de color/tema diferente del predeterminado. Idealmente, me gustaría poder usar las variantes, pero los botones de alternancia de react-bootstrap no admiten el uso de las variantes que pueden usar los otros botones. Intenté seguir una solución que vi desde aquí . Si bien he podido hacer que cambie el color, no he podido hacer que el color activo cambie en absoluto.
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; }su variable de estado checked alternaba entre falso e indefinido.
Pruebe la sugerencia a continuación, probó esto en la caja de arena y funciona según sus requisitos.
Se agregó un componente de botón separado que mantiene un estado separado para botones individuales. De esta manera, podrá reutilizar este componente de botón varias veces.
En su index.js, modifique el código como este
//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"));Y modifica tu estilo.css así
body { background-color: #404040; } .untoggled-button { /* background-image: green !important; */ background-color: green; color: white; } .untoggled-button-active { background-color: red; }