''conditional' css in next/react

I'm trying to apply styling depending on the element's parameters. I've tried to search for "conditional css react", "conditional react style in css" and other similar queries.
My code below:
e.g.

<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>

and the css code

.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;
}

And the rendered image below:
rendered image

cssreactjsnext.js


Solution 1:[1]

Turns out I needed to remove the space between the css selector and the parameter such as:

.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;
}

and the rendered image is below:
rendered image

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions