How to add conditional props to style object in @emotion/react/Typescript?

Question

I want to add props to control my css in emotion,but I don't know how to do

Answer 1

You can wrap it inside a function and handle your function param as prop.

const getMessageWrapperStyle = (props) => {
  css({
    display: "flex",
    alignItems: "center",
    marginBottom: "20px",
    alignSelf: props.from_user === currentId ? "flex-end" : "flex-start",
  });
};

And then use it like that:

css={getMessageWrapperStyle({ from_user: message.from_user })};