css - 更改活动/单击的背景颜色 react-bootstrap 按钮

Question

使用react-bootstrap按钮，我CSS覆盖了悬停背景颜色，但它不会处理活动，我认为它不是'active'，但文档说有一个'active'属性。

如何使用 : 控制按钮的背景颜色CSS："&[active]"属性选择器不起作用，"&:active".

如何制作 Button，使其在单击时不应用新的背景颜色。我假设这来自 中的默认btn样式bootstrap，我只想覆盖它。

const useStyles = makeStyles((theme) => ({
  buyButton:{
    "&[active]": {
      backgroundColor: "#69059F",
    },
    backgroundColor: "#69059F",
    paddingTop: "10px",
    marginTop: "10px",
    borderRadius: "10px",        
    border: "none",          
    "&:hover": {
      backgroundColor: "#69059F" ,
    }       
  }    
}));

标签： cssreactjsreact-bootstrap