use API className={css} #6

Activity

1. emmatown commented on May 8, 2018

   

   emmatown

   on May 8, 2018

   Member

   More actions

   Could you explain why you prefer className={css``}? One of the main reasons for emotion-js/next was to move style insertion into the React tree and this can't happen by using className={css``}.
2. xialvjun commented on May 8, 2018

   

   xialvjun

   on May 8, 2018

   Last edited by xialvjun

   Author

   More actions

   Well, I see, className={css``} is impossible.

   Then how about:

   // wrong because it's global... or we can just use it as global
   <Style css={`.abc { color: red; }`}>
     <div className="abc">123</div>
   </Style>
   
   
   <Style css={`background:blue; & .abc { color: red; }`}>
     {css => <div className={css.default}><div className={css.abc}>123</div></div>}
   </Style>
   
   // or
   
   <Style css={`background:blue; & .abc { color: red; }`}>
     {className => <div className={className}><div className="abc">123</div></div>}
   </Style>

   I don't like jsx is just because I don't think jsx function is not clean.

   I don't like styled.xxx is because I need to define extra Component.
3. emmatown commented on May 8, 2018

   

   emmatown

   on May 8, 2018

   Member

   More actions

   I don't think the API you're proposing would be very good and I think that they would cause problems because both of your examples force you to name a class which is something that we're trying to avoid. Also, the first example would cause problems if you use the same class name down further down the tree. The second example would be difficult to implement well because of the way emotion works and supporting that would make it less performant. It would also create many edge cases, for example what if the selector is #some-id?

   Could explain why you think jsx is not clean?