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

Posted 2023-02-22

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

【英文标题】：How do you override the css for toggle buttons from react bootstrap?

【发布时间】：2021-12-20 23:00:29

【问题描述】：

我有一些切换按钮，我希望有与默认不同的配色方案/主题。理想情况下，我只想能够使用变体，但是 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

【参考方案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;

【讨论】：

谢谢！这适用于一个按钮。但是，当添加第二个按钮时，两个按钮都会变为相同的颜色。它们也不会从绿色变为红色，而是从绿色变为蓝色。有什么想法吗？

我已根据您的评论修改了我的答案。请看一看。