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

rjumatov · Accepted Answer · 2022-07-15 08:05:17Z

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

answered Jul 15, 2022 at 8:05

rjumatov

3,5102 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related