css 如何指定样式包含：在React税

zwghvu4y 于 2023-05-02 发布在 React

关注(0)|答案(1)|浏览(103)

我写了一个css来显示UI元素是否处于活动状态，这是css：

.original-bg {
    background-image: url('../../../asset/image/tool/grid.png');
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ccc;
    display: inline-block;
    background-size: 24px;
    color: #666;
    text-decoration: none;
    padding: 4px;
    margin-right: 10px;
}

.original-bg:active {
    border-color: blue
}

我希望当选中元素时边框变为蓝色。在tsx文件中，我这样写：

<a title="origin" className={imgBg === "origin"?"original-bg:active":"original-bg"}></a>
<a title="red" className="bg-red"></a>

当状态imgBg为原点时，将原点图像边框变为蓝色。现在当我添加这个条件代码时，原始图像就消失了，我错过了什么吗？我该怎么做才能解决这个问题？

css

来源：https://stackoverflow.com/questions/76135323/how-to-specify-the-style-contains-in-react-tax

1条答案

按热度按时间

icnyk63a1#

对你的代码做这些修改，看看它是否能解决问题，如果不能，我将尝试另一种方法

.original-bg {
    background-image: url('../../../asset/image/tool/grid.png');
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ccc;
    display: inline-block;
    background-size: 24px;
    color: #666;
    text-decoration: none;
    padding: 4px;
    margin-right: 10px;
}

.original-bg-active {
    border-color: blue;
}

<a title="origin" className={`original-bg ${imgBg === "origin" ? "original-bg-active" : ""}`}></a>
<a title="red" className="bg-red"></a>

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何指定样式包含：在React税

1条答案

相关问题

热门标签

最新问答