想请教类似于Ant Design这种UI库和emotion这种CSS-IN-JS库解决的是同一个问题吗？

Question

我是一个前端新手正在学习React。一直觉得写css是一件很痛苦的事情，搜索一些比较先进的css方案之后发现了Styled-Components和emotion这种CSS-IN-JS library，发现可以把react组建和css更好的封装在一起。再之后我又了解到了Ant Design这个UI库，发现它提供了很多已经自带样式的组建，比如<Button />

我想请教各位3个问题：
1.Ant Design这种UI库存在的意思是为了提供一些马上就能使用的，自带样式的的组件吗？比如说Ant Design的<Button />，其实是把HTML本身的Button 给封装了一遍然后自带了css？如果这样的话，如果我不喜欢Ant Design给我的样式，我可以自己设定样式去覆盖掉它原本的样式吗？
2.请问如果使用styled components或者emotion这种CSS-IN-JS library，是不是说我就可以把css封装在组建里面，从而达到组建自带样式的效果？那这样的话，一个使用CSS-IN-JS library的项目，理论上可以达到不使用css文件的地步吗？
3.我发现一些UI库，像rebass（https://github.com/rebassjs/r...），是建立在Styled-Components之上的。请问这种UI库跟传统的Bootstrap或者Ant Design（我其实不清楚Ant Design能不能跟Styled-Components一起使用）有什么区别吗？

感谢大家

Answer 1

1. Ant Design是阿里推出的一套设计规范,而Ant Design UI是遵循这一套设计规范的实现,而Ant Design的设计价值观就是提供一种确定确定性,而组件库也同样遵守这一理念.所以你会看到Ant Design UI的组件都是自带样式的.antd FAQ - 你们会提供其他主题吗？
   这对用的人有好处也有坏处,好处是在使用的时候可以不用考虑太多,直接用就好了,坏处就是后期如果需要定制的话,会比较困难.一般如果做一个 demo 或者做一些对定制化需求不强的项目,用起来会比较好.而如果有定制需求的,用起来就比较痛苦了.好久没关注antd了,不清楚最近有没有出现比较好的定制解决方案.
2. css in js是通过技术手段将css仅应用在组件上,从而避免css的全局污染.最简单的就是直接在组件上写style,会生成内联样式.而像styled-components是通过生成全局唯一的类名,来关联css和元素.因为都是直接在js文件内写样式,所以事实上就是不需要css文件的.
3. 要说区别的话,可以有很多从设计的理念到使用的技术,都有很多区别,各有各的优点和缺点.不过底层都是一样的,通过js和css来控制html元素呈现.如果基础掌握好了,用来都不难.
   而要在一个组件库中使用另外一种技术,应该都是可以的,因为他们底层用的都是一样,通过给元素设置类名,通过类名来关联到具体的样式表.
   比如style-components可以通过设置className,最终生成全局唯一的类名,那只要UI库的组件支持设置className既可和style-components结合使用.应该没有什么组件库的组件时不能设置className的,除非这个组件库完全不给自定义,那估计没什么人会用.antd难定制的原因是因为很多样式是直接写死的,如果需要定制,就需要一个个去覆盖,而组件还是支持自己添加样式的.所以在antd中使用style-components也是可以的.
   只是在结合使用的时候,有可能需要通过某些中间技术来适配.有些组件库官方有对应的指南,有些可能就需要社区或者自己来摸索了.
   像material-ui这个组件库,本身是用JSS来实现的,但也可以使用包括CSS Modules,Styled Components,Emotion,Glamor之类的技术.只是用不同的技术,实现比如像主题这样的功能时需要使用对应技术的特性来解决.

Answer 2

其实不管是css-in-js 还是less 或者scss 对于开发者而言 只是写css的形式变化了，你同样还是需要写css的，只是外观的表现形式不同了。
ant-desigin 组件，就是已经写好样式的一些通用组件，避免业务人员重复开发。当然可以自定义样式，你可以用自己的样式覆盖ant-design的组件