如何更改左对齐文本的颜色？

Question

我是 reactjs 的新手，我尝试使用 reactjs 更改左对齐文本的颜色。有人可以帮我吗？

这将是 api 中的 jsondata:

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

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

}

谁能帮我解决这个问题？

Answer 1

 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>

最好在列中使用 <span>,<p> 作为一种良好做法。

希望对您有所帮助！

Answer 2

您应该应用条件样式。这将使您甚至可以传递一个特定的 class 名称来设置组件的样式。

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

Answer 3

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

我认为这会奏效。更改所需的颜色。我为颜色和背景添加了 botj。在上面一个。左边是"green"，右边是"blue"

如何更改左对齐文本的颜色？

How to change color of the left aligned text?

reactjs

semantic-ui-react