Are styled-components really good?

Recently I was learning react, and then I encountered the problem of how to write css in react. I saw a lot of big cows on Zhihu and said that styled-components is easy to use and it is the general trend.

But I have a very poor experience when I use it myself. I am here to talk about why I think styled-components is not easy to use.

1. Since styled-components is used, in addition to referencing the global CSS, should I also refer to the CSS of the component? If it is used, why not write all the styles of the component to the css file of the component?

Well, if you don't refer to css and rely on styled-components to write, let me show you the code

    render() {
    return (
        <HeaderWrap>
            <HeaderContainer>
                <LogoArea>
                    <h1>Mask's barrage website</h1>
                    <p style={{fontSize:30+"px",marginTop:10+"px"}}><LogoArrow></LogoArrow>record life, don't forget the original intention</p>
                </LogoArea>
                <LoginPanel>
                    <p onclick={this.showLoginBox}>登录</p>
                    <p onclick={this.showRegisterBox}>注册</p>
                </LoginPanel>
                <UserPanel>
                    <UserFigure>
                        <p><UserIcon src={this.props.userIconUrl} alt="user-figure"/></p>
                        <p>{this.props.userName}</p>
                    </UserFigure>
                    <UserMenu>
                        <UserOption>投稿</UserOption>
                        <UserOption>空间</UserOption>
                        <UserOption>注销</UserOption>
                    </UserMenu>
                </UserPanel>
            </HeaderContainer>
        </HeaderWrap>
    );
  }

The above code is the code of a header of a webpage I wrote, and I want to encapsulate it into a component. However, the nesting in sass is not easy to use. It is obvious that one nesting can be done, but two components need to be defined. It can be seen that almost all containers are defined by styled-components. The principle of styled-components is to create a component in react, but in fact, some containers may have only 1 or 2 styles, and the constructor should also be called. Creating objects, I think this is a waste of resources, and the workload has also increased.

2. After writing styled-components, you don't know what the html element is, ok, do you know what html element corresponds to each tag in the above example? you do not know. poor readability

3. There is no auto-completion when writing CSS in js, and the style is written in the tag template in js, so there is no auto-completion. It may be possible to set it, but I won't. It's really tiring to write css without completion. .

4. The generated html is also poorly readable

This is the generated html document. You can see that every time you define a styled-component, a class will be randomly generated to bind the style you define. You can see that these classes do not know what the bound style is. When you write css yourself There are still some semantic definitions, such as clearfix

I only felt uncomfortable after using it for 2 days. After reading this article http://www.sohu.com/a/153351371_463987 , I feel very resonant. Anyway, I think styled-components is really not easy to use, everyone Depend on your personal preference

Are styled-components really good?

Guess you like