你如何从反应引导程序中覆盖切换按钮的css？

Question

我有一些切换按钮，我希望有与默认不同的配色方案/主题。理想情况下，我只想能够使用变体，但是 react-bootstrap 的切换按钮不支持使用其他按钮可以使用的变体。我尝试遵循从here 看到的解决方案。虽然我已经能够改变颜色，但我根本无法改变活动颜色。

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

Answer 1

您的状态变量 checked 在 false 和 undefined 之间切换。

请尝试以下建议，在沙箱中对此进行了测试，它可以根据您的要求工作。

添加了一个单独的按钮组件，为各个按钮维护一个单独的状态。这样您就可以多次重复使用此按钮组件。

在你的 index.js 中，像这样修改代码

//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"));

然后像这样修改你的 style.css

body {
  background-color: #404040;
}

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