'conditional' css 在 next/react

Question

我正在尝试根据元素的参数应用样式。我尝试搜索“条件 css 反应”、“css 中的条件反应样式”和其他类似查询。
我的代码如下：
例如

<div class="ChatComponent_chatText__n2g6S">
    <span class="ChatComponent_message__e9Kqh" data-author="me">test me</span>
    <span class="ChatComponent_message__e9Kqh" data-author="other">test others</span>
</div>

和css代码

.message {
    background-color: #eef5f8;
    padding: 0.5em;
    border-radius: 10px;
    flex-grow: 0;
    border-bottom-left-radius: 0;
}

.message [data-author="me"] {
    background: linear-gradient(to right, #363795, #005C97);
    color: white;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 10px !important;
}

以及下面的渲染图：

Answer 1

原来我需要删除 css 选择器和参数之间的 space，例如：

.message {
    background-color: #eef5f8;
    padding: 0.5em;
    border-radius: 10px;
    flex-grow: 0;
    border-bottom-left-radius: 0;
}

.message[data-author="me"] {
    background: linear-gradient(to right, #363795, #005C97);
    color: white;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 10px !important;
}

渲染图如下：

'conditional' css 在 next/react

'conditional' css in next/react

css

reactjs

next.js