How to change color of the left aligned text?

问题

I'm new to reactjs, i tried to change the color of the left align text using reactjs. Can anybody help me in this?

this would be jsondata in api:

{
"message": "Hello everyone",
    "isrespond": true,
},

{
"message": "hi",
    "isrespond": false,

}

Can anyone help me in this ?

回答1:

 <Grid.Column floated={ element.isrespond ? "right" : "left"}><p style={{color: element.isrespond ? "blue" : "green",background:element.isrespond ? "yellow" : "cyan"}}> {result.message}</p></Grid.Column>

I think this will work. change the required colors. I added botj for color and background. In the above one. its "green" for left and "blue" for right

回答2:

You should apply a conditional style. This will enable you even pass a specific class name that styles the component.

let myStyle = element.isrespond ? {float:"right",color:"blue"} : {float:"left",color:"red"};
<Grid.Column style={myStyle}> {result.message}</Grid.Column>

回答3:

 let leftAlignedColor
 if(element.isrespond == "left"){
    leftAlignedColor = '#000'
 }else{
    leftAlignedColor = null
 }
<Grid.Column floated={ element.isrespond ? "right" : "left"}><p style={{color: `${leftAlignedColor}`}}> {result.message}</p></Grid.Column>

its better to use a <span>,<p> inside a column as a good practice.

Hope this is helpful!

来源：https://stackoverflow.com/questions/58850603/how-to-change-color-of-the-left-aligned-text