reactjstypescriptemotioncss-in-js

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


enter image description here

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


Solution

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