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

您应该应用条件样式。这甚至使您可以传递用于对组件进行样式设置的特定类名称。

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。在上面的一个。其“绿色”代表左侧，“蓝色”代表右侧

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

3 个答案: