How to change color of the left aligned text?

与世无争的帅哥 提交于 2020-01-25 06:59:05

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!