MaterialUI ButtonGroup - Active
MaterialUI ButtonGroup - Active
提问于 2020-09-26 10:48:15
所以我知道我可以像这样做一个按钮组，这很棒。
但是，我怎样才能使它在按下按钮时看起来像被选中了？因为所有这些都是点击效应吗？
基本上，我想要做的是，当一个按钮被点击时，它会将输入值更改为该按钮的值。但我希望按钮看起来像是被选中的。
<ButtonGroup disableElevation variant="contained" color="primary">
<Button>One</Button>
<Button>Two</Button>
</ButtonGroup>回答 2
Stack Overflow用户
发布于 2020-09-26 11:02:17
我将使用Button来跟踪所选的状态，并使用color属性来分配颜色。对于任意颜色，您可以使用MUI ThemeProvider或makeStyles
function App() {
const [selectedBtn, setSelectedBtn] = React.useState(-1);
return(
<div>
<ButtonGroup disableElevation variant="contained" color="primary">
<Button color={selectedBtn === 1 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(1)}>One</Button>
<Button color={selectedBtn === 2 ? "secondary" : "primary"} onClick={()=>setSelectedBtn(2)}>Two</Button>
</ButtonGroup>
</div>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { ButtonGroup, Button } = MaterialUI;
</script>
</body>
Stack Overflow用户
发布于 2021-04-07 10:43:20
您可以使用切换按钮- https://material-ui.com/components/toggle-button。
将其与ToggleButtonGroup应用程序接口结合使用，您就可以使用go - https://material-ui.com/api/toggle-button-group/#togglebuttongroup-api了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64073392
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号