如何使选中的图标突出显示答案

【问题标题】：How to make an icon highlighted on selected如何使选中的图标突出显示
【发布时间】：2023-04-06 17:58:01
【问题描述】：

我有三个代表图表的图标：

 <div className="float-right" style={{ marginRight: "5%" }}> 
       <Tooltip disableFocusListener title="BarChart" placement="top"> 
       <BarChartIcon style={{ marginRight: "10px", border: "0.5px solid blue", }} onClick={() => 
       this.renderBarGraph('verticalBarchart')} color="primary" /> 
       </Tooltip> 
       <Tooltip disableFocusListener title="HorizantalBarChart" placement="top"> 
       <BarChartIcon style={{ marginRight: "10px", transform: "rotate(90deg)", 
         border: "0.5px solid blue", marginleft: "8%", }} 
         onClick={() => this.renderBarGraph('horizontalBarchart')} color="primary" /> 
       </Tooltip>
       <Tooltip disableFocusListener title="PieChart" placement="top">   
       <PieChartIcon style={{ marginRight: "10px", border: "0.5px solid blue", }} 
       onClick={() => this.renderBarGraph('pieChart')} color="primary" /> 
       </Tooltip>
       </div>

基于图标点击，状态正在改变并呈现图形。

<div className="col-md-9" style={{ marginLeft: "5%" }}>
   {this.state.graph == 'verticalBarchart' ? <SameDataComposedChart /> : ""}
   {this.state.graph == 'horizontalBarchart' ? <VerticalComposedChart /> : ""}
   {this.state.graph == 'pieChart' ? <PieChartWithCustomizedLabel /> : ""}
</div>

如何在选中时突出显示特定图标。

【问题讨论】：

标签： reactjs redux material-ui icons state

【解决方案1】：

    <Tooltip disableFocusListener title="BarChart" placement="top">
    <BarChartIcon style={this.state.graph=='verticalBarchart'?
    styles.activeChart:styles.inactiveChart} onClick={() =>
    this.renderBarGraph('verticalBarchart')} color="primary" />
    </Tooltip> 
   <Tooltip disableFocusListener title="HorizantalBarChart"
    placement="top"> <BarChartIcon
    style={this.state.graph=='horizontalBarchart'?
    styles.activeChartV:styles.inactiveChartV} onClick={() =>
    this.renderBarGraph('horizontalBarchart')} color="primary" />
    </Tooltip> 
    <Tooltip disableFocusListener title="PieChart"
    placement="top"> <PieChartIcon style={this.state.graph=='pieChart'?
    styles.activeChart:styles.inactiveChart} onClick={() =>
    this.renderBarGraph('pieChart')} color="primary" /> 
   </Tooltip>



------------------------------------------------------------------------

【讨论】：

写出所需的相关样式