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

Time:07-15

enter image description here

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

CodePudding user response:

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 })};
  • Related