时间戳

首页 > 解决方案 > 如何多次更改样式？

css - 如何多次更改样式？

问题描述

我有一个图表，我想在文本周围显示一个边框。我的代码有效，但只有 1 次用于添加或删除边框，但我的事件 MouseEnter/MouseLeave 可以多次工作。为什么是这样？

const Custom_border = (index) =>
{
        data_utilisation.map((data_utilisation, index_1) => 
        {
            if(index == index_1)
            {
                console.log("In")
                const add_border = document.getElementById(index)
                return add_border.classList.add('nice_border')
                
            }
        })
    return null
}

return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>

所有条形图（Recharts API）：

<BarChart
         width={400}
         height={250}
         data={data_utilisation}>

<CartesianGrid opacity={0.1} vertical={false} horizontal={false}/>
<XAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<YAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
                    
<Bar dataKey="uv" fill="#8884d8">
{
  data_utilisation.map((data_utilisation, index) => 
                                        
  {
     if(data_utilisation.uv <= 5000)
     {
       return <Cell className="my_cell" cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
     }
    else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
    {
      return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[1]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
     }
     else
     {
       return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[2]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
      }
      })
      }
</Bar>
</BarChart>

用于在我需要放置边框的条形图旁边显示文本的代码：

<div className="Text_1">
{
   data_utilisation.map((data_utilisation, index) => 
   {
   if(data_utilisation.uv <= 5000)
   {
      return <p id={index} style={{ color: colored[0]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
   }
     else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
     {
       return <p id={index} style={{ color: colored[1]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
     }
else
{
 return <p id={index} style={{ color: colored[2]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}})}
</div>

标签： cssreactjsreact-native

解决方案

如果我正确理解您的用例，您希望在用户将鼠标悬停在单元格上时显示边框。您可以使用 css 来实现这一点，您只需要弄清楚如何选择 Cell 组件。假设它有一个名为 的类名my-cell，您可以简单地添加以下 css。

.my-cell:hover {
  border: 1px solid black;
}

要弄清楚组件的类名是什么，你可以在 dom 上检查它，如果没有，你可以像这样添加它：

return <Cell className="my-cell" ... />

推荐阅读