Компоненты условного стиля React не работают в chrome?

Question

Я пытаюсь создать функцию чата для своего проекта, но по какой-то причине я не могу стилизовать этот компонент так, как я хочу. Это выглядит так, как я ожидал, в Firefox, но не в Chrome.

Эффект, которого я пытаюсь достичь, очень базовый c: если chat объект sender значение равно _id, хранящемуся в локальном хранилище, тело текста должно быть выровнено вправо, в противном случае - влево.

                {chats.map(chat => (
                <p
                    key={chat._id}
                    style={{
                        display: "flex",
                        justifyContent: chat.sender === localStorage._id ? "right" : "left",
                    }}
                >
                    {chat.body}
                </p>
            ))}

введите описание изображения здесь

Answer 1

Попробуйте следующее:

{chats.map(chat => (
            <p
                key={chat._id}
                style={{
                    display: "flex",
                    justifyContent: chat.sender === localStorage._id ? "flex-end" : "flex-start",
                }}
            >
                {chat.body}
            </p>
        ))}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/