I am exploring ways to style elements based on their parameters. I have been searching for terms like "conditional css react" and "implementing conditional styles in react with css".
Here is a snippet of my code:
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 accompanying 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;
}
Check out the rendered image below:
https://i.stack.imgur.com/G43DX.png