So machen Sie Chat wie UI mit Chat -Blasen in React JS ⇐ CSS

[Anonymous]

Ich habe einige JSON -Daten in DummyData . Ich bin mir nicht sicher, wie ich die Chat -Blasen links und rechts nach der Richtung platzieren kann. Ich benutze Material UI und Kontext -API. Bild als Referenz. Ich möchte keine andere Bibliothek als das Material UI verwenden. net /xk4rx.png " /> < /p>

Derzeit ist jede Chat -Blase links positioniert. So positionieren Sie Blasen nach der Richtung . Code bisher (codesandbox): < /p>

Code: Select all

    import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(theme => ({
container: {
bottom: 0,
position: 'fixed'
},
bubbleContainer: {
width: '100%'
},
bubble: {
border: '0.5px solid black',
borderRadius: '10px',
margin: '5px',
padding: '10px',
display: 'inline-block'
}
}));

const ChatLayout = () => {
const classes = useStyles();
const dummyData = [
{
message: '1: This should be in left',
direction: 'left'
},
{
message: '2: This should be in right',
direction: 'right'
},
{
message: '3: This should be in left again',
direction: 'left'
}
];

const chatBubbles = dummyData.map((obj, i = 0) => (


{obj.message}


));
return {chatBubbles};
};

export default ChatLayout;