styled-components真的好吗？

最新推荐文章于 2023-02-21 15:58:20 发布

weixin_30773135

最新推荐文章于 2023-02-21 15:58:20 发布

阅读量317

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/maskmtj/p/8906182.html

版权

最近在学习react，然后遇到react中css该怎么写这个问题，上知乎上看了好多大牛都说styled-components好用是大势所趋。

但我自己用了感觉体验却很差，我在这里说说我为啥觉得styled-components不好用。

1.既然用了styled-components，那除了引用全局的css，还要引用组件的css吗？如果用了，干嘛不把组件的样式全部写到组件的css文件中呢？

好吧，如果不引用css，全靠styled-components来写的话，我给大家看一下代码

    render() {
    return (
        <HeaderWrap>
            <HeaderContainer>
                <LogoArea>
                    <h1>Mask的弹幕网站</h1>
                    <p style={{fontSize:30+"px",marginTop:10+"px"}}><LogoArrow></LogoArrow>记录生活，不忘初心</p>
                </LogoArea>
                <LoginPanel>
                    <p οnclick={this.showLoginBox}>登录</p>
                    <p οnclick={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>
    );
  }

上面的代码是我写的网页的一个header的代码，我是想把它封装成组件的。但是sass里面的嵌套的写法也不好使了，明明一个嵌套就搞定的事情，反而要定义两个组件。可以看到几乎所有容器都被用styled-components来定义了，styled-components的原理就是创建一个react里的component，但实际上有些容器所对应的样式可能就1、2条，也要调用构造函数创建对象，我是觉得这样很浪费资源，工作量也上升了。

2.styled-components写完之后你不知道html元素是啥，ok，上面的例子你知道每个标签对应html什么元素吗？你不知道。可读性很差

3.在js里写css没有自动补全，样式是在js里的标签模板里写的，所以没有自动补全。可能可以设置吧，但我不会，写css没有补全真的累。。

4.生成的html可读性也很差