What is considered the best way to style components in React with Emotion in terms of readability and performance?

Question

I guess there are 3 main ways to style components in Emotion

<div
    className={
        css`
        height: 150px;
        display: flex;
        padding: ${theme.defaultUnit}px ${theme.defaultUnit * 4}px;
        border-top: 1px solid red;
        border-right: 1px solid yellow;
        background: #fff;
        align-items: center;
        `,
    }
/>

const styles =  css`
        height: 150px;
        display: flex;
        padding: ${theme.defaultUnit}px ${theme.defaultUnit * 4}px;
        border-top: 1px solid red;
        border-right: 1px solid yellow;
        background: #fff;
        align-items: center;
        `, 
<div className={styles} />

const StyledContainer = styled.div`
     height: 150px;
     display: flex;
     padding: ${theme.defaultUnit}px ${theme.defaultUnit * 4}px;
     border-top: 1px solid red;
     border-right: 1px solid yellow;
     background: #fff;
     align-items: center;
`
<StyledContainer />

Out of those 3 is there one considered best? I don't like option 1 personally as it bloats components with css and makes them harder to read. But I was wondering if there was performance implications with option 2? and therefore does that make option 3 the best? wondering if anyone has insight on this

Answer 1

I have worked on projects where one or all the above are used. It really comes down to culture and need.

No one has a final answer and the community is still debating the subject. Emotion best practices is evolving

Object styles are easier to use and in my opinion closer to the concept of good functional and object oriented programming used by react.

A good article on the subject talks more in detail about some of the pros and cons, but again it's mostly preference.

The best for a team is code that looks clean and is human readable that doesn't clutter the component.